css怎么让3个点依次循环出现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怎么让3个点依次循环出现相关的知识，希望对你有一定的参考价值。
你是不是说的这种圆点依次出现的效果？如果是的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>
这个源码可以参考一下咯，自己用的时候还可以继续修改优化。
参考技术A 首先设置一个数组开启一个时间周期事件，timeout的另一个兄弟
然后设置数组中分别存三个点的变量
开启事件后每次加一个下标
并判断当下标>数组长度-1时回到0
并每次把数组当前这个点设置show，而他的兄弟元素则hide（）
注意数组设置
本质上和轮播图的原理一致并无区别
还有问题可以追问哦，如果有帮助别忘记采纳亲 参考技术B css是无法做功能性的事情的哦，css只是渲染样式用的；你要循环的话可以用js的for循环，如果你还有时间间隔的话可以加一个计时函数
以上是关于css怎么让3个点依次循环出现的主要内容，如果未能解决你的问题，请参考以下文章
这个css 的animation怎么使两次循环间不出现中断，不是循环一次顿一下然后再继续下次循环，