css实现风车转动 |css 去掉图片间距

.windmill {
position: relative;
width: 100px;
height: 100px;
}
.windmill div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.windmill .blade {
transform-origin: 0% 100%;
animation: windmill 2s ease-in-out infinite;
}
@keyframes windmill {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}

首先，大家创建一个class为“windmill”的元素。该元素中包含三个div，第一个div为容器，设置其position属性为relative，宽度和高度均为100px即可。后两个div为风车的两片叶子，宽度和高度均为100%。

接着，大家设置.blade的transform-origin属性，将其设置为原点在左下角，这样可以使风车转动的时候更加符合实际情况。然后，大家给.blade添加动画，名称为windmill，持续时间为2秒，动画的缓动函数设置为ease-in-out，无限循环。

最后，定义了名为windmill的动画，动画的关键帧有3个，分别是0%、50%和100%。在0%时刻，风车的叶子没有旋转。在50%时刻，风车的叶子旋转了180度。在100%时刻，风车的叶子完整地旋转了一圈，即360度。

这样，一个简单的CSS风车就完成了。使用以上代码，可以在HTML中创建一个容器元素，然后将class设置为windmill即可在页面中展示一个旋转的风车。