希望这个黑线能围绕里头的圆无线循环转圈,3秒一圈
<div class="wrap">
<div class="wrap-inner"></div>
<div class="indicator"></div>
</div>
.wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: cadetblue;
}
.wrap-inner {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: aqua;
}
.indicator {
width: 150px;
height: 6px;
position: absolute;
background-color: black;
left: 63%;
}
感谢
写了个 demo:https://codepen.io/meathill/p...
其实关键点就是:
transform-origin: center left
,改变变形中心。