1.代码块
*{
margin: 0;
padding: 0;
text-decoration: none;
}
#box {
width: 600px;
height: 480px;
border: 1px solid red;
position: relative;
overflow: hidden;
margin: 0 auto;
}
img{
width: 600px;
float: left;
}
#first{
height: 480px;
width: 4800px;
border: 1px solid rgb(0, 0, 0);
animation: name infinite 15s 1s;
}
.lj{
position: absolute;
left: 20px;
bottom: 20px;
}
.lj a{
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
background-color: #CCC;
margin-left: 5px;
}
a:hover{
box-shadow: 0px 0px 2px 3px rgb(209, 209, 209);
background-color: white;
transform: scale(1.5);
}
@keyframes name{
13%{margin-left: -600px;}
26%{margin-left: -1200px;}
39%{margin-left: -1800px;}
52%{margin-left: -2400px;}
68%{margin-left: -3000px;}
81%{margin-left: -3600px;}
100%{margin-left: -4200px;}
}
2.效果
看我发布的视频