首页运用animation实现风车转动

运用animation实现风车转动

时间: 2024-02-10 18:07:19 浏览: 116

以下是一个使用CSS3的animation属性实现风车旋转的例子： ```html <!DOCTYPE html> <html> <head> <style> /* 定义风车的样式 */ .box { width: 100px; height: 100px; background-color: #f00; position: relative; } .box:before, .box:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f00; } .box:before { transform: rotate(45deg); } .box:after { transform: rotate(135deg); } /* 定义动画 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 应用动画 */ .box { animation: rotate 3s linear infinite; } </style> </head> <body> <div class="box"></div> </body> </html> ``` 解释： 1. 首先定义了一个类名为box的div元素，作为风车的容器。 2. 在box的:before和:after伪元素中定义了两个三角形，分别旋转45度和135度，组成了风车的形状。 3. 定义了一个名为rotate的动画，从0度旋转到360度。 4. 将动画应用到box元素上，使其无限循环旋转。

阅读全文