效果
🌟 微动画能够为用户界面增添活力和趣味性。本文将带领读者学习如何使用纯CSS来实现一个生动的小风车动画效果。无需JavaScript或其他库，我们仅需利用CSS的强大功能，包括关键帧动画(@keyframes)和转换(transform)属性，即可创造出一个既美观又富有动感的动画风车。本教程适合希望在网页设计中加入创意动画效果的设计师和开发者。
完整代码
HTML
<div class="windBox"> <div class="threeAngle right"></div> <div class="threeAngle bottom"></div> <div class="threeAngle left"></div> <div class="threeAngle top"></div> </div> <div class="stick"></div>
CSS：
.windBox { position: relative; z-index: 10; width: 200px; height: 200px; animation: circle 2s infinite linear; } .stick { position: absolute; top: 95px; left: 102.5px; height: 200px; width: 10px; background: royalblue; border-radius: 5px; } .threeAngle { position: absolute; height: 0; border: 50px solid transparent; } .threeAngle.right { border-right-color: rgba(223, 219, 29, 0.825); } .threeAngle.bottom { left: 100px; border-bottom-color: rgb(0, 255, 98); } .threeAngle.left { top: 100px; left: 100px; border-left-color: rgb(128, 115, 244); } .threeAngle.top { top: 100px; border-top-color: rgb(241, 0, 161); } @keyframes circle { to { transform: rotate(0); } from { transform: rotate(360deg); } }
