html代码:
<div class="image-circle">
<img src="../../assets/charts/icon-warning-info.png" alt="" class="icon-info">
</div>
1.现在css里添加
@keyframes round_animate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes round_animate1 {
from {
transform: translate(-50%, -50%) rotate(360deg);
}
to {
transform: translate(-50%, -50%) rotate(0deg);
}
}
2.在需要旋转的元素里添加
.image-circle {
width: 300px;
height: 300px;
background: url("../../assets/charts/icon-warning-circle.png") no-repeat;
background-size: 100% 100%;
position: absolute;
animation: round_animate 5s linear infinite;
}
.icon-info {
position: absolute;
top: 50%;
left: 50%;
width: 95px;
height: 95px;
transform: translate(-50%, -50%);
animation: round_animate1 5s linear infinite;
}
因为icon-info这个元素在image-circle里,默认使用父元素的动画,但是需求是不让icon-info旋转,那就让他同步以相反方向旋转。 又由于icon-info居中,使用了定位,所以也要在round_animate1里添加translate(-50%, -50%);