[分享]css两层旋转动画

CSS是网页设计中不可或缺的一部分，它可以使网页的外观更加丰富和生动。今天，我们来学习一下如何使用CSS实现两层旋转动画。 .container { : relative; width: 200px;...

CSS是网页设计中不可或缺的一部分，它可以使网页的外观更加丰富和生动。今天，我们来学习一下如何使用CSS实现两层旋转动画。

 .container {
    position: relative;
    width: 200px;
    height: 200px;
  }
  
  .box1, .box2 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 20px #000;
  }
  
  .box1 {
    transform: rotate(0deg);
    animation: spin1 2s linear infinite;
  }
  
  .box2 {
    transform: rotate(180deg);
    animation: spin2 2s linear infinite;
  }
  
  @keyframes spin1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes spin2 {
    from { transform: rotate(180deg); }
    to { transform: rotate(540deg); }
  } 

以上代码中，我们先定义了一个容器并设置它的宽高和position属性。然后创建两个相同大小的div，为它们设置绝对定位，半径为50%的圆角，以及20px的边框和阴影。接下来，我们为这两个div设置不同的初始旋转角度，并通过CSS的animation属性使它们无限旋转。最后，我们定义了两个关键帧，分别控制了两个div的旋转角度。

有了这个代码，我们就可以轻松地在网页中添加两层旋转动画了。如果你想要更多的旋转层数，只需在容器中添加更多的相同样式的div，并为它们设置不同的初始旋转角度和关键帧即可。