<!--<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 » Thủ Thuật Blogspot » CSS Animation - Tự động thay đổi màu nền theo thời gian đẹp vãi!

CSS Animation - Tự động thay đổi màu nền theo thời gian đẹp vãi!

CSS Animation - Tự động thay đổi màu nền theo thời gian đẹp vãi!

Animation Framework CSS Thủ Thuật Blogspot

tháng 7 06, 2018

Share on Facebook Tweet on Twitter  

Animation CSS3 là một framework tuyệt vời được sử dụng rất nhiều trong thiết kế web, nếu ta biết cách tùy biến nó thì sẽ mang lại rất nhiều thủ thuật hay và độc đáo. Bài viết hôm nay mình sẽ dùng framework đó, tùy biến lại bằng cách cho tự thay đổi màu nền theo khoảng thời gian nhất định. Rất đẹp và chuyên nghiệp!

LABEL : #Animation Framework #CSS #Thủ Thuật Blogspot

posted by

Nguyễn Đình Diện

at tháng 7 06, 2018

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2838643729-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5neZr-RXK-OBLaF3GlxfM5nZTnAw:1750129955371';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7306137828648818524','//diendzfed.blogspot.com/2018/07/css-animation-tu-ong-thay-oi-mau-nen.html','7306137828648818524');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7306137828648818524', 'title': 'Nguy\u1ec5n Di\u1ec7n Blogger', 'url': 'http://diendzfed.blogspot.com/2018/07/css-animation-tu-ong-thay-oi-mau-nen.html', 'canonicalUrl': 'http://diendzfed.blogspot.com/2018/07/css-animation-tu-ong-thay-oi-mau-nen.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/7705497480490862378/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': '7705497480490862378', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcepeZvFlFgo2Sw0cyjsy8P-9BrLnsTUdb7EMbnVhbW8Mqqr0KXGdX4HzGicPTYnzp3s8-7HN8BzynS-SmALHGhAUGAF5h9ChN-LXJGcK4pQVeOvwxCxx9z8vgoz2gJed0gkKhSL8S1pwX/s72-c/css-animation-bacsiwindows.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcepeZvFlFgo2Sw0cyjsy8P-9BrLnsTUdb7EMbnVhbW8Mqqr0KXGdX4HzGicPTYnzp3s8-7HN8BzynS-SmALHGhAUGAF5h9ChN-LXJGcK4pQVeOvwxCxx9z8vgoz2gJed0gkKhSL8S1pwX/s1600/css-animation-bacsiwindows.png', 'pageName': 'CSS Animation - T\u1ef1 \u0111\u1ed9ng thay \u0111\u1ed5i m\xe0u n\u1ec1n theo th\u1eddi gian \u0111\u1eb9p v\xe3i!', 'pageTitle': 'Nguy\u1ec5n Di\u1ec7n Blogger: CSS Animation - T\u1ef1 \u0111\u1ed9ng thay \u0111\u1ed5i m\xe0u n\u1ec1n theo th\u1eddi gian \u0111\u1eb9p v\xe3i!'}}, {'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': 'CSS Animation - T\u1ef1 \u0111\u1ed9ng thay \u0111\u1ed5i m\xe0u n\u1ec1n theo th\u1eddi gian \u0111\u1eb9p v\xe3i!', 'description': 'Animation CSS3 l\xe0 m\u1ed9t framework tuy\u1ec7t v\u1eddi \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ea5t nhi\u1ec1u trong thi\u1ebft k\u1ebf web, n\u1ebfu ta bi\u1ebft c\xe1ch t\xf9y bi\u1ebfn n\xf3 th\xec s\u1ebd mang l\u1ea1i r\u1ea5t nhi\u1ec1u ...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcepeZvFlFgo2Sw0cyjsy8P-9BrLnsTUdb7EMbnVhbW8Mqqr0KXGdX4HzGicPTYnzp3s8-7HN8BzynS-SmALHGhAUGAF5h9ChN-LXJGcK4pQVeOvwxCxx9z8vgoz2gJed0gkKhSL8S1pwX/s1600/css-animation-bacsiwindows.png', 'url': 'http://diendzfed.blogspot.com/2018/07/css-animation-tu-ong-thay-oi-mau-nen.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 7705497480490862378}}]);
_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>-->