给元素添加动画实现旋转的效果

<div   class="rotate"></div>

先准备一个盒子

 .rotate {
          width: 450px;
          height: 450px;
          background: url("../assets/lbx.png") no-repeat;
          background-size: 100% 100%;
          position: absolute;
          top: 7%;
          left: 11%;
          // transform: translate(-50%, -50%);
          animation: move 12s linear infinite;
        }

给盒子添加样式 盒子最底部的一行代码是不可少的

 @keyframes move {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

这部分代码 写在跟.rotate同级位置      如果想要反方向旋转  就把   0    和360   位置换一下