<!--<head><style type='text/css'>@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf)format('truetype');}</style>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=f6237e5c-46ef-42b6-89d7-632e00aebeb1' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=f6237e5c-46ef-42b6-89d7-632e00aebeb1' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

</head>-->

Home » Animation Framework » CSS » CSS3 Animation Framework - Hiệu ứng slideUp tuyệt đẹp cho Blogspot

CSS3 Animation Framework - Hiệu ứng slideUp tuyệt đẹp cho Blogspot

CSS3 Animation Framework - Hiệu ứng slideUp tuyệt đẹp cho Blogspot

Animation Framework CSS

tháng 7 07, 2018

Share on Facebook Tweet on Twitter  

Có nhiều cách để trang trí cho blog của mình, và đây cũng là 1 trong những cách trang trí cho blog đẹp nhất và đơn giản nhất. Sử dụng hoàn toàn CSS nên rất dễ thực hiện và không ảnh hưởng đến tốc độ load trang. Bạn có thể ngó qua loạt bài viết về chuyên mục Animation Framework trong blog của mình để có nhiều cái trang trí hơn cho blog nhé.

Xem Demo ngay tại trang này, F5 để thấy hiệu ứng.

Cách thực hiện

Thêm toàn bộ CSS bên dưới vào Template là xong!

LABEL : #Animation Framework #CSS

posted by

Nguyễn Đình Diện

at tháng 7 07, 2018

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2838643729-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4oUR5UTOr3HwAELdP-ivzwHN1QZg:1750194411251';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7306137828648818524','//diendzfed.blogspot.com/2018/07/css3-animation-framework-hieu-ung.html','7306137828648818524');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7306137828648818524', 'title': 'Nguy\u1ec5n Di\u1ec7n Blogger', 'url': 'http://diendzfed.blogspot.com/2018/07/css3-animation-framework-hieu-ung.html', 'canonicalUrl': 'http://diendzfed.blogspot.com/2018/07/css3-animation-framework-hieu-ung.html', 'homepageUrl': 'http://diendzfed.blogspot.com/', 'searchUrl': 'http://diendzfed.blogspot.com/search', 'canonicalHomepageUrl': 'http://diendzfed.blogspot.com/', 'blogspotFaviconUrl': 'http://diendzfed.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'vi', 'localeUnderscoreDelimited': 'vi', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - RSS\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7306137828648818524/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/1368611060885467051/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a332d1916da3fccd', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Nh\u1eadn \u0111\u01b0\u1eddng li\xean k\u1ebft', 'key': 'link', 'shareMessage': 'Nh\u1eadn \u0111\u01b0\u1eddng li\xean k\u1ebft', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Chia s\u1ebb v\u1edbi Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Chia s\u1ebb v\u1edbi X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Chia s\u1ebb v\u1edbi Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27vi\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': '\u0110\u1ecdc th\xeam', 'pageType': 'item', 'postId': '1368611060885467051', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFPqxTRsMagje8aLxOCyA8MY4XhEr9UVXyBkv5JzBZPihIsWUwERprJtXaG7cwsXklS6wsq0sJCieFDRLEHsKkL2FnPDPfeZXjG6T9WzTBBrVItJL-77N3SQ8szSRTiICTBd5emMnF_bD/s72-c/slide-animation-css3-framework-BacSiWindows-Com.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFPqxTRsMagje8aLxOCyA8MY4XhEr9UVXyBkv5JzBZPihIsWUwERprJtXaG7cwsXklS6wsq0sJCieFDRLEHsKkL2FnPDPfeZXjG6T9WzTBBrVItJL-77N3SQ8szSRTiICTBd5emMnF_bD/s1600/slide-animation-css3-framework-BacSiWindows-Com.png', 'pageName': 'CSS3 Animation Framework - Hi\u1ec7u \u1ee9ng slideUp tuy\u1ec7t \u0111\u1eb9p cho Blogspot', 'pageTitle': 'Nguy\u1ec5n Di\u1ec7n Blogger: CSS3 Animation Framework - Hi\u1ec7u \u1ee9ng slideUp tuy\u1ec7t \u0111\u1eb9p cho Blogspot'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Ch\u1ec9nh s\u1eeda', 'linkCopiedToClipboard': '\u0110\xe3 sao ch\xe9p \u0111\u01b0\u1eddng li\xean k\u1ebft v\xe0o b\u1ea3ng nh\u1edb t\u1ea1m!', 'ok': 'Ok', 'postLink': 'Li\xean k\u1ebft b\xe0i \u0111\u0103ng'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'T\xf9y ch\u1ec9nh', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'CSS3 Animation Framework - Hi\u1ec7u \u1ee9ng slideUp tuy\u1ec7t \u0111\u1eb9p cho Blogspot', 'description': 'C\xf3 nhi\u1ec1u c\xe1ch \u0111\u1ec3 trang tr\xed cho blog c\u1ee7a m\xecnh, v\xe0 \u0111\xe2y c\u0169ng l\xe0 1 trong nh\u1eefng c\xe1ch trang tr\xed cho blog \u0111\u1eb9p nh\u1ea5t v\xe0 \u0111\u01a1n gi\u1ea3n nh\u1ea5t. S\u1eed d\u1ee5ng ho\xe0n t...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFPqxTRsMagje8aLxOCyA8MY4XhEr9UVXyBkv5JzBZPihIsWUwERprJtXaG7cwsXklS6wsq0sJCieFDRLEHsKkL2FnPDPfeZXjG6T9WzTBBrVItJL-77N3SQ8szSRTiICTBd5emMnF_bD/s1600/slide-animation-css3-framework-BacSiWindows-Com.png', 'url': 'http://diendzfed.blogspot.com/2018/07/css3-animation-framework-hieu-ung.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1368611060885467051}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'H-Site', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'H-Rigt', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/4162115085-lbx__vi.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'grids', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
</script>
</body>-->