html中简单轮播图实现原理,css实现的一个简单的轮播图

CSS3轮播图

* {

margin: 0;

padding: 0;

}

.container {

width: 1200px;

height: 600px;

overflow: hidden;

margin: 0 auto;

}

.photo {

width: 7200px;

animation: switch 12s ease-out infinite;

}

.photo>img {

float: left;

width: 1200px;

height: 600px;

}

/*@keyframes 规则用于创建动画*/

@keyframes switch {

0%,

10% {

margin-left: 0;

}

20%,

30% {

margin-left: -1200px;

}

40%,

50% {

margin-left: -2400px;

}

60%,

70% {

margin-left: -3600px;

}

80%,

90% {

margin-left: -4800px;

}

99%,

100% {

margin-left: -6000px;

}

}

/*http://www.w3school.com.cn/css3/css3_animation.asp*/