CSS3动画设置后台登录页背景切换图片

最新推荐文章于 2024-06-04 18:14:27 发布

weixin_30872499

最新推荐文章于 2024-06-04 18:14:27 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/walblog/p/8060057.html

本文介绍如何使用CSS3实现无限循环的背景图片切换动画效果。通过简单的代码配置，即可让网页背景在不同图片间平滑过渡，适用于各种现代浏览器。

CSS3的动画很实用很好用，简单几句话就可以做出一个好看而且过渡平滑的body背景图片，不多说，来来来，上代码

 1 body{
 2     animation:mybg 7s;
 3     -webkit-animation:mybg 7s; /* Safari and Chrome */
 4     -moz-animation:mybg 7s; /* Safari and Chrome */
 5     animation-iteration-count:infinite;
 6 }
 7 @keyframes mybg{
 8     0% {background:url(/static/admin/images/banner_1.jpg);background-size:100%;}
 9     50% {background:url(/static/admin/images/banner_2.jpg);background-size:100%;}
10     100% {background:url(/static/admin/images/banner_1.jpg);background-size:100%;}
11 }
12 /* Safari and Chrome */
13 @keyframes mybg{
14     0% {background:url(/static/admin/images/banner_1.jpg);background-size:100%;}
15     50% {background:url(/static/admin/images/banner_2.jpg);background-size:100%;}
16     100% {background:url(/static/admin/images/banner_1.jpg);background-size:100%;}
17 }
18 /* Firfox */
19 @keyframes mybg{
20     0% {background:url(/static/admin/images/banner_1.jpg);background-size:100%;}
21     50% {background:url(/static/admin/images/banner_2.jpg);background-size:100%;}
22     100% {background:url(/static/admin/images/banner_1.jpg);background-size:100%;}
23 }