html彩色风车,Velocity.js+CSS3 彩色风车（Pinwheel）

可以通过以下HTML和CSS代码实现一个彩色风车（Pinwheel）：

HTML代码：

<div class="pinwheel">
  <div class="blade red"></div>
  <div class="blade green"></div>
  <div class="blade blue"></div>
  <div class="blade yellow"></div>
</div>

CSS代码：

.pinwheel {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
  transform-origin: center;
  animation: spin 2s linear infinite;
}

.blade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.red {
  transform: rotate(0deg);
  background-color: #ff3b30;
}

.green {
  transform: rotate(90deg);
  background-color: #4cd964;
}

.blue {
  transform: rotate(180deg);
  background-color: #007aff;
}

.yellow {
  transform: rotate(270deg);
  background-color: #ffcc00;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这个彩色风车使用了Velocity.js动画库来实现旋转动画。可以在HTML文件中引入Velocity.js库，然后在CSS中使用animation属性来指定动画效果。其中，@keyframes规则定义了动画的关键帧，transform属性定义了旋转的角度。每个叶片使用不同的颜色，可以通过background-color属性来指定。