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>
评论