css实现图片向动画一样旋转

455 阅读1分钟

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%);