风车

最新推荐文章于 2025-07-17 15:13:28 发布

原创最新推荐文章于 2025-07-17 15:13:28 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实例演示了如何使用CSS进行网页布局与动画效果的实现，包括定位、动画帧及旋转动画的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <style>
  *{
   margin: 0;
   padding: 0;
  } 
  .kaj{
   width: 100%;
   height: 990px;
   background: #fff;
  }
  .fkio{
   width: 20px;
   height: 200px;
   background: #F10004;
   position: relative;
   top: 133px;
   left: 738px;
  }
  .fkii{
  width: 110px;
   height: 110px;
   background: #FF0004;
   border-radius: 150px;
   position: relative;
   top: -112px;
   left: 694px;
  }
  .caus img{
   width: 300px;
   margin: 0 auto;
   position:absolute;
   top:0px;
   left:600px;
   animation: move 5s 0s infinite;
  }
  @keyframes move{
   0%{transform: rotate(0deg);
   }
   
   100%{transform: rotate(360deg);
    }
  }
 </style>
 <body>
 <div class="kaj">
  <div class="caus">
   <img src="img/km.PNG" alt="">
  </div>
  <div class="fkio"></div>
  <div class="fkii"></div>
 </div>
</body>