做一个风车需要我们有四个div小盒子，在小盒子里面放一个半圆，然后使用定位将四个半圆分别放在对应的位置，最后就可以加动画效果使半圆旋转，以达到小风车的旋转效果了
1.首先我们在html完成其基本的结构
在body标签中创建一个大div盒子,在大的里面放入四个小的div盒子（也就是小风车的四片叶子）
<body><div class="cotent"><div class="bix1"></div><div class="bix2"></div><div class="bix3"></div><div class="bix4"></div></div></body>
2.我在最外层div（content）中设置一下宽高（因为我们的风车是靠大盒子旋转实现的）也要将盒子进行一下定位
.cotent {width: 200px;height: 200px;position: relative;top: 200px;left: 50%;}
3.完成了基本的盒子我们就可以开始做风车的叶子了
做几一个像这样的半圆，（代码图片如下）
.bix1{background: green;border-radius: 100px 0 0 100px;width: 50px;height: 100px;}
然后我们做四个这样的半圆就可以了
4.对四个半圆进行定位 让它都在一块（）
四个半圆的宽高度不能都一样（代码如下）因为四个半圆
是同方向的话定位时无法完成四片叶子都是朝外
.bix1,.bix2 {width: 100px;height: 50px;}.bix3,.bix4 {width: 50px;height: 100px;}
5 .完成四个半圆的创建和方向后我们要对他们的颜色和位置做出改变了
代码如下，改变了四个半圆的颜色和位置。
.bix1 {background: #5108C8;border-radius: 100px 100px 0 0;position: absolute;top: 50px;left: 0px;}.bix2 {background: #FFED00;border-radius: 0 0 100px 100px;position: absolute;top: 100px;left: 100px;}.bix3 {background: #ead;border-radius: 0 100px 100px 0;position: absolute;left: 100px;}.bix4 {background: green;border-radius: 100px 0 0 100px;position: absolute;top: 100px;left: 50px;}
他们就会变成这样
6.然后就是给div(cotent)加一个动画了
.cotent {width: 200px;height: 200px;position: relative;top: 200px;left: 50%;float: left;animation: box 1s ;animation-iteration-count: infinite;}
动画效果
@keyframes box {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}
7.完成这些设置以后小风车就可以转起来了
1666496240375
8.全部代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>* {margin: 0;padding: 0;}.cotent {width: 200px;height: 200px;position: relative;top: 200px;left: 50%;float: left;animation: box 1s ;animation-iteration-count: infinite;}@keyframes box {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}.bix1,.bix2 {width: 100px;height: 50px;}.bix3,.bix4 {width: 50px;height: 100px;}.bix1 {background: #5108C8;border-radius: 100px 100px 0 0;position: absolute;top: 50px;left: 0px;}.bix2 {background: #FFED00;border-radius: 0 0 100px 100px;position: absolute;top: 100px;left: 100px;}.bix3 {background: #ead;border-radius: 0 100px 100px 0;position: absolute;left: 100px;}.bix4 {background: green;border-radius: 100px 0 0 100px;position: absolute;top: 100px;left: 50px;}</style><body><div class="cotent"><div class="bix1"></div><div class="bix2"></div><div class="bix3"></div><div class="bix4"></div></div> </body></html>
