<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#box {
width: 800px;
margin: 0 auto;
}
.img {
position: relative;
}
.img img {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 500px;
opacity: 0;
transition: opacity 1s;
animation: ani 15s 0s linear infinite running;
/* animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 15s;
animation-play-state:running; */
}
#box:hover img{animation-play-state: paused;}
/* .img a img:nth-child(1){opacity: 0;}
.img a img:nth-child(2){animation-delay: 3s;} */
/* .img a img:nth-child(3){animation-delay:7s;}
.img a img:nth-child(4){animation-delay:11s;} */
.img img.have {
opacity: 1;
z-index: 1;
}
#box .btn {
position: absolute;
left: 50%;
top: 480px;
z-index: 2;
cursor: pointer;
}
.btn li {
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
margin: 0 2px;
}
@keyframes ani {
0% {
opacity: 0;
z-index: 1;
}
5%{
opacity:1 ;
z-index: 1;
}
25% {
opacity: 0;
z-index: 1;
}
75%{
opacity: 0;
z-index: 0;
}
}
.btn li:after {
display: block;
content: '';
clear: both;
}
.btn li.have {
background: #f60;
}
</style>
</head>
<body>
<div id="box">
<div class="img">
<a href="http://www.baidu.com" target="blank"><img class="have" src="imgs/1.jpg" alt=""></a>
<a href="http://www.taobao.com" target="blank"><img src="imgs/2.jpg" alt=""></a>
<a href="http://www.360.cn" target="blank"><img src="imgs/3.jpg" alt=""></a>
<a href="http://www.jd.com" target="blank"><img src="imgs/4.jpg" alt=""></a>
</div>
<ul class="btn">
<li class="have"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
请问用css3实现多张图片淡入淡出是怎么写的，求帮忙我这样写不知道为什么只能看到一点点的变化，第一张图片都直接跳过了完全没有淡入淡出，求大神指点
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
