旋转风车的HTML代码包括两部分,一部分是HTML结构,另一部分是CSS样式。
<div class="windmill"> <div class="blade blade1"></div> <div class="blade blade2"></div> <div class="blade blade3"></div> <div class="blade blade4"></div> <div class="center"></div> </div>
上面的HTML结构中,最外层的div设置了一个class为“windmill”,用来控制整个风车的位置和大小。接下来的四个div分别代表四个叶片,class属性分别为“blade1”、“blade2”、“blade3”和“blade4”。
接下来是CSS样式的部分:
.windmill { width: 100px; height: 100px; position: relative; } .blade { width: 0; height: 0; border-style: solid; border-width: 0 30px 150px 30px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; transform-origin: bottom center; } .blade1 { transform: rotate(0deg); } .blade2 { transform: rotate(90deg); } .blade3 { transform: rotate(180deg); } .blade4 { transform: rotate(270deg); } .center { width: 30px; height: 30px; background: black; border-radius: 50%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; }
在CSS样式中,我们首先给了“windmill”类一个宽度和高度,并设置其position属性为relative。随后对四个“blade”类设置了相应的样式。其中,我们利用了border-style、border-width、transform-origin和transform等属性来实现风车叶片的形状和旋转效果。
最后,我们使用了一个“center”类来实现风车中心的黑色圆形,其也是利用position属性来控制位置和大小。