HTML视频能不能做成轮播图,css3轮播图怎么实现

css3轮播图怎么实现

1、首先写上轮播图的布局

首先slider的大盒子是相对定位，另外采用在li标签中添加background-image，因为这样才有可能用纯的css实现响应式，另外背景图为了在响应式中看清全貌，使用background-size:100%，另外就是高度问题了，显然slider-container必需是和li的高度一致，因为响应式中必然这个高度不能固定死，所以使用height属性显然不行，padding属性可以解决这个问题，一是background-image可以显示在padding中，二是padding中以%为单位是以父元素宽度为基准的。

(相关课程推荐：css视频教程)*{

margin:0;

padding:0;

}

ul,li{

list-style: none;

}

.floatfix {

*zoom: 1;

}

.floatfix:after {

content: "";

display: table;

clear: both;

}

.slider-contaner{

width:100%;

position:relative;

}

.slider,.slider-item{

padding-bottom:40%;

}

.slider-item{

width:100%;

position:absolute;

background-size:100%;

}

.slider-item1{

background-image:url(imgs/1.jpg);

}

.slider-item2{

background-image:url(imgs/2.jpg);

}

.slider-item3{

background-image:url(imgs/3.jpg);

}

.slider-item4{

background-image:url(imgs/4.jpg);

}

.slider-item5{

background-image:url(imgs/5.jpg);

}

2、然后使用animation添加动画

淡入淡出效果使用opacity，首先整体来看所有图片的淡入淡出都是同一个动画，只是时间不一样而已，这是利用animation-delay来控制，动画无限轮换使用animation-iteration-count: infinite，我们这次5张图片，整个动画分为图片停留和淡入淡出两个效果。

因为css3中没有一个属性是规定两次动画播放的时间间隔，所以我们必须把其他图片淡入淡出时该图片的效果写进动画里，这时候是opacity:0；

为了写动画的方便，动画使用线性函数，也就是animation-timing-function:linear;整个过程使用20s，一次停留使用3秒，一次淡入淡出使用1s，折合成百分比也就是15%和5%；@keyframes fade{0%{

opacity:0;

z-index:2;}5%{

opacity:1;

z-index: 1;}20%{

opacity:1;

z-index:1;}25%{

opacity:0;

z-index:0;}100%{

opacity:0;

z-index:0;}}

3、最后为每一张图片添加动画延时

接下来就是为每张图片添加animation-delay了，因为第一张图片必须显示在最前，所以其他通过相邻兄弟选择器使用opacity:0，第一张图片开始不需要淡入淡出，直接跳至停留也就是5%，所以animation-delay为-1s，第二张图片和第一张相隔20%，也就是4s，animation-delay为3s，以此类推.slider-item + .slider-item{

opacity:0;}.slider-item1{

animation-delay: -1s;}.slider-item2{

animation-delay: 3s;}.slider-item3{

animation-delay: 7s;}.slider-item4{

animation-delay: 11s;}.slider-item5{

animation-delay: 15s;}

这个时候我们的轮播图可以动了

本文来自css3答疑栏目，欢迎学习！