html页面布局 具体思路就是画三个圆圈 大圈、中大圈、中圈，然后用绝对定位定位好，大圈和中圈同一个层级，中大圈比他们两个低一个层级，以此来欺骗眼睛实现动态效果
<div class="icon1">
</div>
<div class="icon2">
</div>
<div class="icon3"><span v-show="clockm<10">0</span>{{clockm}}: <span v-show="clocks<10">0</span>{{clocks}}</div>
</div>
// 此处判断秒针或者分针小于10自动补零
js代码块
//js
data(){
return{
clocks:0,// 秒
clockm:0,//分
}
}
mounted() {
const self = this
self.timerclock = setInterval(() => {
if(!self.doctorNum){
self.clocks +=1
self.clocktim()
}
},1000);
}
methods: {
//定义秒针大于60分针+1
clocktim(){
const self = this
if(self.clocks >59){
self.clocks = 0
self.clockm +=1
}
},
}
//css代码块
@-webkit-keyframes rot {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.icon {
width: px(410);
height: px(410);
border-radius: 50%;
position: relative;
z-index: 11;
overflow: hidden;
}
.icon1{
width: px(410);
height: px(410);
border-radius: 50%;
z-index: 11;
border: 10px solid #fff;
background: transparent;/* 最大的盒子无背景色*/
position: absolute;
}
.icon2{
position: absolute;
top: 6px;
left: 7px;
top: -31%;
left: -31%;
z-index: 10;/* 运动的部分在最中间层*/
border-left:px(340) solid #00bdbe;
border-right:px(340) solid #E7EAEF;
border-top:px(340) solid #00bdbe;
border-bottom:px(340) solid #E7EAEF;/*利用border的不同设置便可以产生不同的效果*/
background: #ddd;
animation: rot 2s linear infinite;
}
.icon3{
position: absolute;
top: 50%;
left: 50%;
margin-top: px(-170);
margin-left: px(-170);
z-index: 11;
width: px(340);
height: px(340);
line-height: px(300);
text-align: center;
font-weight: 700;
color: #333;
font-size: px(78);
border-radius: 50%;
border: 10px solid #fff;
background: #fff;
}
最终效果展示
拆分css动画展示（主要就是中间的三角形【其实是正方形】按照圆心运动给人的视觉效果像是绿色在动其实是三角形在动使得绿色像是在运动【你的body背景颜色是什么颜色圈中的绿色就是什么颜色记住默认是白色会看不出来】，最简单的动画效果）
