css怎么让3个点依次循环出现
2022-03-18 16:11:11
你是不是说的这种圆点依次出现的效果？如果是的haul，那就用动画来做就可以了。下面是源码，可以参考一下咯。另外，javascript也可以来控制依次出现。
<!DOCTYPE html>
<html>
<head>
<title>圆点依次出现</title>
<meta name="keywords" content="圆点依次出现"/>
<meta name="description" content="圆点依次出现"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*{
padding:0;
margin:0;
box-shadow:1px 1px gray inset,-1px -1px gray inset;
}
#box{
position:relative;
width:30%;
height:300px;
margin:0 auto;
}
.dian{
position:absolute;
width:20px;
height:20px;
border-radius:50%;
top:270px;
}
#dian1{
left:70%;
animation:xdian1 2.5s both linear infinite;
-webkit-animation:xdian1 2.5s both linear infinite; /* Safari and Chrome */
}
#dian2{
left:80%;
animation:xdian2 2.5s both linear infinite;
-webkit-animation:xdian2 2.5s both linear infinite; /* Safari and Chrome */
}
#dian3{
left:90%;
animation:xdian3 2.5s both linear infinite;
-webkit-animation:xdian3 2.5s both linear infinite; /* Safari and Chrome */
}
@keyframes xdian1{
0%{background:gray;}
33%{background:none;}
68%{background:none;}
100%{background:none;}
}
@keyframes xdian2{
0%{background:none;}
33%{background:gray;}
68%{background:none;}
100%{background:none;}
}
@keyframes xdian3{
0%{background:none;}
33%{background:none;}
68%{background:gray;}
100%{background:none;}
}
</style>
</head>
<body>
<div id="box">
<span id="dian1"></span>
<span id="dian2"></span>
<span id="dian3"></span>
</div>
</body>
</html>
这个源码可以参考一下咯，自己用的时候还可以继续修改优化。
2023-04-06 23:13:42
开启一个时间周期事件，timeout的另一个兄弟
然后设置数组中分别存三个点的变量
开启事件后每次加一个下标
并判断当下标>数组长度-1时回到0
并每次把数组当前这个点设置show，而他的兄弟元素则hide（）
注意数组设置
本质上和轮播图的原理一致并无区别
还有问题可以追问哦，如果有帮助别忘记采纳亲
2022-12-03 13:23:02
热门标签
