首页html风车旋转动画全部代码

html风车旋转动画全部代码

时间: 2024-10-21 08:03:11 浏览: 31

在HTML中创建一个简单的风车旋转动画通常需要结合CSS3的`transform`属性和关键帧动画（@keyframes）。下面是一个基础的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <style> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .windmill { width: 100px; height: 100px; background-color: #ff4500; /* 风车颜色 */ position: relative; animation: spin 2s linear infinite; /* 动画持续时间、速度曲线和无限循环 */ } .windmill-sector { position: absolute; top: 50%; left: 50%; transform-origin: center center; width: 80%; height: 80%; } /* 定义风车叶片 */ .windmill-sector:nth-child(1) { background-color: white; transform: translate(-50%, -50%) rotate(0deg); } .windmill-sector:nth-child(2) { background-color: lightblue; transform: translate(-50%, -50%) rotate(60deg); } .windmill-sector:nth-child(3) { background-color: yellow; transform: translate(-50%, -50%) rotate(120deg); } .windmill-sector:nth-child(4) { background-color: green; transform: translate(-50%, -50%) rotate(180deg); } .windmill-sector:nth-child(5) { background-color: orange; transform: translate(-50%, -50%) rotate(240deg); } .windmill-sector:nth-child(6) { background-color: pink; transform: translate(-50%, -50%) rotate(300deg); } </style> </head> <body> <div class="windmill"> <div class="windmill-sector"></div>  </div> </body> </html> ```

阅读全文