[分享]CSS3教程舞蹈简单

如果你想学习如何使用CSS3来为你的网页添加一些漂亮的动画效果，那么这篇教程就是为你准备的！在这里，我们将教你如何使用CSS3制作一个简单的舞蹈动画。首先，我们需要创建一个dance的div。我们使用...

如果你想学习如何使用CSS3来为你的网页添加一些漂亮的动画效果，那么这篇教程就是为你准备的！在这里，我们将教你如何使用CSS3制作一个简单的舞蹈动画。

首先，我们需要创建一个dance的div。我们使用下面的代码：

 <div class="dance">
    <div class="leg left"></div>
    <div class="leg right"></div>
    <div class="arm left"></div>
    <div class="arm right"></div>
  </div> 

接下来，我们需要在CSS中定义我们的舞蹈动画。我们将使用keyframe来定义舞蹈动作的过渡效果。下面是我们的CSS代码：

 .dance {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
     }
     
  .leg {
    width: 20px;
    height: 50px;
    background-color: #000000;
    position: absolute;
    border-radius: 10px;
     }
     
  .left {
    left: 20px;
     }
     
  .right {
    right: 20px;
     }
     
  .arm {
    width: 50px;
    height: 20px;
    background-color: #000000;
    position: absolute;
    border-radius: 10px;
     }
     
  .left.arm {
    top: 20px;
    left: 0;
     }
     
  .right.arm {
    top: 20px;
    right: 0;
     }
     
  @keyframes dance {
    from {
      transform: rotateZ(0deg);
    }
    to {
      transform: rotateZ(360deg);
    }
  }
     
  .left.leg {
    top: 0;
    animation: dance 2s infinite alternate;
  }
     
  .right.leg {
    top: 0;
    animation: dance 2s infinite;
  }
     
  .left.arm {
    animation: dance 2s infinite alternate;
    transform-origin: 0% 100%;
  }
     
  .right.arm {
    animation: dance 2s infinite;
    transform-origin: 100% 100%;
  } 

现在我们的舞蹈动画已经可以在我们的网页上展示了！通过使用CSS3，我们可以更容易地创建漂亮的动画效果，让我们的网页更有吸引力。