基本信息
源码名称：图片轮转的实现效果(CSS3多背景图片运用)
源码大小：5.10M
文件格式：.rar
开发语言：CSS
更新时间：2020-10-28
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
CSS3多背景图片运用结合animation标签可以做出图片轮转效果，不必用到JS

<title>图片轮转的实现</title>
<style type="text/css"> 
.demo{

width:796px;
height:621px;
margin:0 auto;
border: 1px solid #000;
background-image:url(images/pic01.png), url(images/pic02.png), url(images/pic03.png), url(images/pic04.png), url(images/pic05.png);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size:796px 622px;
animation-name:myfirst; /*设置动画名*/
animation-duration:8s; /*动画周期时间*/
animation-timing-function:linear; /*动画函数*/
animation-delay:4s; /*动画延迟时间*/
animation-iteration-count:infinite; /*动画次数*/
animation-direction:alternate; /*动画方向*/
animation-play-state:running; /*动画状态*/
}
@keyframes myfirst /*定义动画关键帧*/
{
0%   { background-position:0px 0px, -796px 0px, -1594px 0px, -2388px 0px, -3184px 0px;}
25%  { background-position:796px 0px, 0px 0px, -796px 0px, -1594px 0px, -2388px 0px;}
50%  { background-position:1594px 0px, 796px 0px, 0px 0px, -796px 0px, -1594px 0px;}
75%  { background-position:2388px 0px, 1594px 0px, 796px 0px, 0px 0px, -796px 0px;}
100% { background-position:3184px 0px, 2388px 0px, 1594px 0px, 796px 0px, 0px 0px;}
}

</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>