61,114
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tuijian1{
width: 500px;
height: 500px;
}
.tuijian1 div{
width: 500px;
height: 500px;
background-color: grey;
border-radius: 10px;
box-shadow: 5px 5px 5px #BFBFBF;
}
.tuijian ul li{
list-style: none;
float: left;
display: inline-block;
}
.tuijian1{
overflow: hidden;
}
.tuijian1 div{
position: absolute;
}
.tuijian1 img{
width: 100%;
height: auto;
}
.tuijian1 div:nth-child(1){
-webkit-animation-name: lundun1;
animation-name: lundun1;
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes lundun1 {
0%{
opacity: 0;
}
75%{
opacity: 1;
}
95%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.tuijian1 div:nth-child(1) img{
z-index: 4;
}
.tuijian1 div:nth-child(2){
-webkit-animation-name: lundun2;
animation-name: lundun2;
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes lundun2 {
0%{
opacity: 1;
}
50%{
opacity: 1;
}
70%{
opacity: 1;
}
75%{
opacity: 0;
}
100%{
opacity: 0;
}
}
.tuijian1 div:nth-child(2) img{
z-index: 3;
}
.tuijian1 div:nth-child(3){
-webkit-animation-name: lundun3;
animation-name: lundun3;
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes lundun3 {
0%{
opacity: 1;
}
25%{
opacity: 1;
}
45%{
opacity: 1;
}
50%{
opacity: 0;
}
99%{
opacity: 0;
}
100%{
opacity: 0;
}
}
.tuijian1 div:nth-child(3) img{
z-index: 2;
}
.tuijian1 div:nth-child(4){
-webkit-animation-name: lundun4;
animation-name: lundun4;
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: 5;
}
@keyframes lundun4 {
0%{
opacity: 1;
}
20%{
opacity: 1;
}
25%{
opacity: 0;
}
99.9%{
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>
</head>
<body>
<div class="tuijian">
<ul>
<li><div class="tuijian1"><!-- 图片上传不了,用正方形的尺寸就行了 -->
<div><a href=""><img src="images/4.jpg" alt=""></a></div>
<div><a href=""><img src="images/3.jpg" alt=""></a></div>
<div><a href=""><img src="images/2.jpg" alt=""></a></div>
<div><a href=""><img src="images/1.jpg" alt=""></a></div>
</div></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tuijian1{
width: 500px;
height: 500px;
}
.tuijian1 div{
width: 500px;
height: 500px;
background-color: grey;
border-radius: 10px;
box-shadow: 5px 5px 5px #BFBFBF;
}
.tuijian ul li{
list-style: none;
float: left;
display: inline-block;
}
.tuijian1{
overflow: hidden;
position: relative;
}
.tuijian1 img{
width: 100%;
height: auto;
}
.tuijian1 div{
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
-webkit-animation-name: lundun;
animation-name: lundun;
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes lundun {
0%{opacity: 0;}
5%{opacity: 1;}
25%{opacity: 1;}
30%{opacity: 0;}
100%{opacity: 0;}
}
.tuijian1 div:nth-child(1){
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.tuijian1 div:nth-child(2){
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.tuijian1 div:nth-child(3){
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.tuijian1 div:nth-child(4){
-webkit-animation-delay: 18s;
animation-delay: 18s;
}
</style>
</head>
<body>
<div class="tuijian">
<ul>
<li><div class="tuijian1"><!-- 图片上传不了,用正方形的尺寸就行了 -->
<div><a href=""><img src="images/4.jpg" alt=""></a></div>
<div><a href=""><img src="images/3.jpg" alt=""></a></div>
<div><a href=""><img src="images/2.jpg" alt=""></a></div>
<div><a href=""><img src="images/1.jpg" alt=""></a></div>
</div></li>
</ul>
</div>
</body>
</html>