纯css怎么让焦点跟幻灯片链接上

发布网友发布时间：2023-08-15 16:58

共1个回答

热心网友时间：2024-11-19 21:33

<html>

<head>
<title></title>
</head>
<style type="text/css">
#wrap {
width: 300px;
text-align: center;
overflow: hidden;
margin: 50px 50px;
}

.box {
width: 1200px;
height: auto;
display: inline-block;
animation: b1 10s infinite;
}

.box img {
width: 300px;
float: left;
}

@-webkit-keyframes b1 {
0% {
margin-left: 0px;
}
15% {
margin-left: 0px;
}
20% {
margin-left: -300px;
}
30% {
margin-left: -300px;
}
35% {
margin-left: -600px;
}
45% {
margin-left: -600px;
}
50% {
margin-left: -900px;
}
60% {
margin-left: -900px;
}
65% {
margin-left: -600px;
}
75% {
margin-left: -600px;
}
80% {
margin-left: -300px;
}
90% {
margin-left: -300px;
}
100% {
margin-left: 0px;
}
}
</style>

</head>

<body>

<div id="wrap">

<div class="box">

<img src="你的图片地址" id="a1" />

<img src="你的图片地址" id="a2" /> /*这里就看你放的图片有多少。。我就只写了两张的，，，，*/

</div>

</div>

</body>

</html>