当先锋百科网

首页 1 2 3 4 5 6 7

旋转风车的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代码

上面的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属性来控制位置和大小。