CSS3实现轮播图效果
程序员文章站
2022-04-24 09:48:53
...
因为CSS的局限性，所以只能做出图片无限循环播放的效果，和图片点击链接
其他的因为效果不完美所以摒弃了
效果图预览：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.container{
margin: 0 auto;
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
.img_container{
position: absolute;
width: 1500px;
animation:mycolor 10s;
-moz-animation:mycolor 10s;
-webkit-animation:mycolor 10s;
-o-animation:mycolor 10s;
animation-iteration-count: infinite;
}
@keyframes mycolor{
0%{
left: 0;
}
20%{
left: -300px;
}
40%{
left: -600px;
}
60%{
left: -900px;
}
80%{
left: -1200px;
}
100%{
left: 0;
}
}
.img_container li{
width: 300px;
height: 300px;
float: left;
}
.img_container li:nth-child(1){
background-color: #868686;
}
.img_container li:nth-child(2){
background-color: #FF0000;
}
.img_container li:nth-child(3){
background-color: #228B22;
}
.img_container li:nth-child(4){
background-color: blue;
}
.img_container li:nth-child(5){
background-color: brown;
}
.img_container:hover{
}
.img_container li a{
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<ul class="img_container">
<li>
<a href="#">
<img src="" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="" alt="" />
</a>
</li>
</ul>
</div>
</body>
</html>