<html>
<div class="box">
<img src="./img/buleLight.png" alt="">
</div>
<div class="border"></div>
</html>
<style lang="scss">
.border {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid rgb(13, 94, 170);
z-index: 2;
}
.box {
width: 200px;
height: 200px;
position: absolute;
z-index: 1;
animation: rotate 3s linear infinite;
border: 1px solid rgb(170, 13, 86);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
img {
position: relative;
width: 20px;
top: 15px;
left: 28px;
}
</style>
关键:转的不是点 是点在的div(此div与圆重叠且宽高相等)