css：匀速无限旋转

2023-04-13 442 阅读1分钟

一、效果

二、css实现

<!DOCTYPE html>
<html>

<head>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: yellowgreen;
      animation: turn 1s linear infinite;
      margin: 100px auto;
    }

    @keyframes turn {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>