做项目的时候总用别人的轮播插件，就想着自己能不能做一个轮播，能不能用纯CSS做的，然后就在网上查了一下，发现例子还不少，然后看一下别人的，自己照猫画虎的也来一个试试，很简单的一个效果，这个的体验效果不太好，想学习的可以看一下试试
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/test_5.css">
</head>
<body>
<div id="carousel">
<ul class="slider">
<li class="items item_1"><img src="../img/img_14.jpg"><h1>1</h1></li>
<li class="items item_2"><img src="../img/img_15.jpg"><h1>2</h1></li>
<li class="items item_3"><img src="../img/img_16.jpg"><h1>3</h1></li>
<li class="items item_4"><img src="../img/img_17.jpg"><h1>4</h1></li>
<li class="items item_5"><img src="../img/img_18.jpg"><h1>5</h1></li>
</ul>
</div>
</body>
</html>
CSS代码如下：
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
#carousel{
width: 600px;
height: 400px;
background-color: rgba(255,63,63,.3);
margin: 20px auto;
}
#carousel .slider{
padding: 0;
margin: 0;
position: relative;
}
#carousel .items{
width: 100%;
position: absolute;
animation: carousel 20s linear infinite;
/* animation: name duration timing-function delay iteration-count direction;
animation: 绑定到选择器的keyframe名称 花费时长 速度曲线 延迟 播放次数 是否反向播放动画; */
}
#carousel .items+.items:hover{
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
#carousel .items img{
width: 100%;
height: 100%;
}
#carousel .item_1{
animation-delay: -1s;
z-index: -1;
}
#carousel .item_2{
animation-delay: 3s;
z-index: -1;
}
#carousel .item_3{
animation-delay: 7s;
z-index: -1;
}
#carousel .item_4{
animation-delay: 11s;
z-index: -1;
}
#carousel .item_5{
animation-delay: 15s;
z-index: -1;
}
#carousel h1{
position: absolute;
top: 50px;
left: 200px;
background-color: #FF3F3F;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 100%;
font-size: 40px;
color: #fff;
text-align: center;
}
@keyframes carousel{
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:-1;
}
}
/*
css实现暂停
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
*/
效果图如下：
