风车代码

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      width: 400px;
      height: 800px;
      margin: 50px auto;
      position: relative;
    }
    .container .ye{
      width: 400px;
      height: 400px;
    }
    .container .ye div{
      position: absolute;
      z-index: 1;
    }
    .container .ye div:first-of-type{
      width: 200px;
      height: 100px;
      border-radius: 100px 100px 0 0;
      background-color: #01d9ff;
      top:100px;
    }
    .container .ye div:nth-of-type(2){
      width: 100px;
      height: 200px;
      border-radius: 0 100px 100px 0;
      background-color: #ff0178;
      top: 0;
      left: 200px;
    }
    .container .ye div:nth-of-type(3){
      width: 200px;
      height: 100px;
      border-radius: 0 0 100px 100px ;
      background-color: #01ff2b;
      left: 200px;
      top: 200px;
    }
    .container .ye div:nth-of-type(4){
      width: 100px;
      height: 200px;
      border-radius:  100px 0 0 100px ;
      background-color: #ffdd01;
      left: 100px;
      top: 200px;
    }
    .container .stick{
      width: 10px;
      height: 400px;
      background-color: black;
      border-radius: 5px;
      position: absolute;
      left: 195px;
      top: 200px;
      z-index: -1;
    }
    .ye{
      animation: biu 1s linear 0.5s infinite;
    }
    @keyframes biu {
      0%{
        transform: rotate(0);
      }
      100%{
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <diV class="container">
    <div class="ye">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="stick"></div>
  </diV>

</body>
Title
</body>
posted @ 2022-11-21 11:31  笑到肚子疼  阅读(22)  评论(0)    收藏  举报