本文目录
css怎么让3个点依次循环出现
你是不是说的这种圆点依次出现的效果？如果是的haul，那就用动画来做就可以了。下面是源码，可以参考一下咯。另外，javascript也可以来控制依次出现。
《!DOCTYPE html》
《html》
《head》
《title》圆点依次出现《/title》
《meta name="keywords" content="圆点依次出现"/》
《meta name="description" content="圆点依次出现"/》
***隐藏网址***
《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》
这个源码可以参考一下咯，自己用的时候还可以继续修改优化。
vue 利用伪元素实现div实现背景图旋转 div内容不旋转
利用伪元素实现div实现背景图旋转 原样式设定 .circle_data{ width: 200px; height: 200px; color:#FFFFFF; text-align: center; vertical-align: middle; z-index: 999; position: relative; overflow: hidden; } 伪元素设置 .circle_data::before { content: ""; position: absolute; width: 180px; height: 180px; top: 3%; left: 3%; z-index: -1; background: url(../../../assets/gird/analysislayout/assess/images/circle.png) no-repeat; background-size: cover; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 10s; -moz-transition-property: -moz-transform; -moz-transition-duration: 10s; -webkit-animation: rotate 10s linear infinite; -moz-animation: rotate 10s linear infinite; -o-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; } 旋转 @keyframes rotate{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} }
js,控制一个div向左右匀速移动循环
这个不需要js， 直接使用css就行，给你一个简单的demo，有不懂的可以问我：《!DOCTYPE html》《html lang="en"》《head》《meta charset="UTF-8"》《title》Title《/title》《style type="text/css"》body{height: 100%; position: relative;}.demo{position: absolute; width: 80%; height: 200px; background: #2aa198;animation: move 1s linear infinite alternate;}@keyframes move {from{left: 0}to{left: 10%}}《/style》《/head》《body》《div class="demo"》《/div》《/body》《/html》
