图片轮播html实现原理,纯CSS实现图片轮播

原文：http://www.aichengxu.com/view/4182590

关键点：利用keyframes 原理：infinite

注意点：在处理关键帧动画的时候，注意处理好 总共花费的 animation-duration：time 与每帧延延迟的时间的交错；要让动画显得层次感，处理好 每帧的延迟时间；

多注意时间的穿插 ；效果更很好；下面只是我的小插图；画的不一定对;

以下是我的代码；有兴趣拷贝来看看，仅作为我的练习记录；关键帧要兼容其他浏览器，自行补充前缀即可；

纯css轮播图

*{ margin:0 ; padding:0}

ul,li{ list-style:none; margin:0; padding:0;}

.box,

.box:after {

position: fixed;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

z-index: 0;

}

.box:after {

content: '';

background: transparent url(../images/pattern.png) repeat top left;

}

.box li span {

width: 100%;

height: 100%;

position: absolute;

top: 0px;

left: 0px;

background-size: cover;

background-position: 50% 50%;

background-repeat: none; background-color:#333;

opacity: 0;

z-index: 0;

-webkit-backface-visibility: hidden;

-webkit-animation: imageAnimation 18s linear infinite 0s;

-moz-animation: imageAnimation 18s linear infinite 0s;

-o-animation: imageAnimation 18s linear infinite 0s;

-ms-animation: imageAnimation 18s linear infinite 0s;

animation: imageAnimation 18s linear infinite 0s;

}

.box li div {

z-index: 1000;

position: absolute;

bottom: 30px;

left: 0px;

width: 100%;

text-align: center;

opacity: 0;

-webkit-animation: titleAnimation 18s linear infinite 0s;

-moz-animation: titleAnimation 18s linear infinite 0s;

-o-animation: titleAnimation 18s linear infinite 0s;

-ms-animation: titleAnimation 18s linear infinite 0s;

animation: titleAnimation 18s linear infinite 0s;

}

.box li div h3 {

font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

font-size: 160px;

padding: 0 30px;

line-height: 120px;

color: rgba(255,255,255,0.8);

}

.box li:nth-child(1) span { background-image: url(../images/love5.jpg) }

.box li:nth-child(2) span {

background-image: url(../images/love3.jpg);

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-o-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s;

}

.box li:nth-child(3) span {

background-image: url(../images/love1.jpg);

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

-o-animation-delay: 12s;

-ms-animation-delay: 12s;

animation-delay: 12s;

}

.box li:nth-child(2) div {

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-o-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s;

}

.box li:nth-child(3) div {

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

-o-animation-delay: 12s;

-ms-animation-delay: 12s;

animation-delay: 12s;

}

@-webkit-keyframes imageAnimation {

0% {

opacity: 0;

-webkit-animation-timing-function: ease-in;

}

11% {

opacity: 1;

-webkit-transform: scale(1.05);

-webkit-animation-timing-function: ease-out;

}

30% {

opacity: 1;

-webkit-transform: scale(1.1);

}

35% {

opacity: 0;

-webkit-transform: scale(1.1) translateY(-20%);

}

49% {

opacity: 0;

-webkit-transform: scale(1.1) translateY(-60%);

}

100% { opacity: 0 ; -webkit-transform: scale(1.1) translateY(-100%);}

}

@-moz-keyframes imageAnimation {

0% {

opacity: 0;

-moz-animation-timing-function: ease-in;

}

11% {

opacity: 1;

-moz-transform: scale(1.05);

-moz-animation-timing-function: ease-out;

}

30% {

opacity: 1;

-moz-transform: scale(1.1);

}

35% {

opacity: 0;

-moz-transform: scale(1.1) translateY(-20%);

}

49% {

opacity: 0;

-moz-transform: scale(1.1) translateY(-60%);

}

100% { opacity: 0 ; -moz-transform: scale(1.1) translateY(-100%);}

}

@keyframes imageAnimation {

0% {

opacity: 0;

animation-timing-function: ease-in;

}

11% {

opacity: 1;

transform: scale(1.05);

animation-timing-function: ease-out;

}

30% {

opacity: 1;

transform: scale(1.1);

}

35% {

opacity: 0;

transform: scale(1.1) translateY(-20%);

}

49% {

opacity: 0;

transform: scale(1.1) translateY(-60%);

}

100% { opacity: 0 ; transform: scale(1.1) translateY(-100%);}

}

@-webkit-keyframes titleAnimation {

0% {

opacity: 0;

-webkit-transform: translateY(-300%);

}

8% {

opacity: 1;

-webkit-transform: translateY(0%);

}

22% {

opacity: 1;

-webkit-transform: translateY(0%);

}

28% {

opacity: 0;

-webkit-transform: translateY(100%);

}

35% { opacity: 0 }

100% { opacity: 0 }

}

@-moz-keyframes titleAnimation {

0% {

opacity: 0;

-moz-transform: translateY(-300%);

}

8% {

opacity: 1;

-moz-transform: translateY(0%);

}

22% {

opacity: 1;

-moz-transform: translateY(0%);

}

28% {

opacity: 0;

-moz-transform: translateY(100%);

}

35% { opacity: 0 }

100% { opacity: 0 }

}

@keyframes titleAnimation {

0% {

opacity: 0;

transform: translateY(-300%);

}

8% {

opacity: 1;

transform: translateY(0%);

}

22% {

opacity: 1;

transform: translateY(0%);

}

28% {

opacity: 0;

transform: translateY(100%);

}

35% { opacity: 0 }

100% { opacity: 0 }

}

/* Show at least something when animations not supported */

.no-cssanimations .box li span{

opacity: 1;

}

• Image 01

  第1张

• Image 02

  第2张

• Image 03

  第3张

其他：

1，相同参数的可以写在一起；

2，可以只有to， 也可以只有类似50% 省略0%和100%；因为后面的会重置前面的样式；