html slider图片,纯CSS的Slider

Step1：图片定位

HTML Markup

CSS Style

.slider-container {

position: absolute;

width: 100vw;

height: 100vh;

overflow: hidden;

}

.slider {

position: absolute;

width: 100%;

height: 100%;

background: no-repeat 50% 50%;

background-size: cover;

opacity: 1;

filter: alpha(opacity=100);

z-index: -100;

-webkit-transform: scale(1.2);

transform: scale(1.2);

}

**Step 2: 确认轮播效果的时间轴 **

先决定前后两张图片重叠时间，每张图片播放时间，完成一个周期需要多少时间

time-line.JPG

由上图我们我们总共播放6张图片，过场时间为1s,每张图片播放时间为3s,一个完整的周期为24s，因为在@keyframes的时间是以百分比来表示，所以要先把s换算成百分比。

100% / 24秒 = 4.17% ( 每秒)

CSS3 Keyframes Animation

.slider{

-webkit-animation: zoomout 24s linear infinite;

animation: zoomout 24s linear infinite;

}

@keyframes zoomout {

/* 0 - 1秒 淡入*/

0% {

opacity: 1;

filter: alpha(opacity=100);

-webkit-transform: scale(1.2);

transform: scale(1.2);

z-index: 100;

}

16.68% {

/* 1-4s是播放时间 */

filter: alpha(opacity=100);

opacity: 1;

}

17.72% {

/* 4-5秒之间淡出4.25s*/

opacity: 0;

-webkit-transform: scale(1);

transform: scale(1);

z-index: -100;

}

}

@-webkit-keyframes zoomout {

0% {

/* 0 - 1秒 淡入*/

opacity: 1;

filter: alpha(opacity=100);

-webkit-transform: scale(1.2);

transform: scale(1.2);

z-index: 100;

}

16.68% {

/* 1-4s是播放时间 */

filter: alpha(opacity=100);

opacity: 1;

}

17.72% {

/* 4-5秒之间淡出4.25s*/

opacity: 0;

-webkit-transform: scale(1);

transform: scale(1);

z-index: -100;

}

}

每张图片进场时间间隔4s

.slider:nth-child(1) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.slider:nth-child(2) {

-webkit-animation-delay: 4s;

animation-delay: 4s;

}

.slider:nth-child(3) {

-webkit-animation-delay: 8s;

animation-delay: 8s;

}

.slider:nth-child(4) {

-webkit-animation-delay: 12s;

animation-delay: 12s;

}

.slider:nth-child(5) {

-webkit-animation-delay: 16s;

animation-delay: 16s;

}

.slider:nth-child(6) {

-webkit-animation-delay: 20s;

animation-delay: 20s;

}

如果新增图片，请修改 animation-duration=每张时间X张数(4s*6张)

并重新换算1s的百分比值 100%/24s=4.17%(每秒)