在html中怎么同时让几个风车同时旋转

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<div style = "height:500pxwidth:500pxposition:staticfloat:left">

<div class="wrap">

<div class="red"></div>

<div class="yellow"></div>

<div class="pink"></div>

<div class="cyna"></div>

</div>

<div class="limb"></div>

</div>

<style>

div{ border-radius: 50%position: absolute}

.red{

border-top:100px solid red

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid red

transform:rotate(-45deg)

left:150px

top:50px

}

.yellow{

border-top:100px solid yellow

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid yellow

left:250px

top:150px

transform:rotate(45deg)

}

.pink{

border-top:100px solid pink

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid pink

left:150px

top:250px

transform:rotate(135deg)

}

.cyna{

border-top:100px solid cyan

border-right: 100px solid transparent

border-bottom: 100px solid transparent

border-left: 100px solid cyan

left:50px

top:150px

transform:rotate(-135deg)

}

@keyframes run{

from{transform: rotate(0deg)}

to{transform: rotate(360deg)}

}

@-webkit-keyframes run{

from{transform: rotate(0deg)}

to{transform: rotate(360deg)}

}

.wrap{

width: 500px

height: 500px

line-height: 500px

text-align: center

border-radius: 0

position: relative

margin:0 auto

animation:run 2s linear infinite

}

.limb{

width: 10px

height: 300px

border-radius: 0

background-color: #000

margin: 0 auto

left: 245px

top: 0

margin-top: -250px

position: static

z-index: -1

}

<\style>

风车动漫电脑版网站：网页链接

特色：

1. 最全漫画库，追新神速

上万部国内外（日韩，欧美，港台）完美漫画，各类题材（热血，搞笑，魔幻等）全方面覆盖；资源内容每日更新, 紧贴网络进度，即时更新提醒，让你追漫0等待；

2. 在线+离线阅读，清晰画质

在线+离线阅读，从此告别蜗牛速，没有网络也能想看就看；独特的图片处理技术，节省更多空间，高清晰低内存的完美漫画，带给你别具一格的阅读体验；

3. 个性分类，智能搜索

分类涵盖题材，精选和作者3种方式，个性化推荐满足漫迷们的挑剔口味；特有的智能搜索引擎，海量关键词汇搜索引导，不再让好漫画轻易从指尖错过！

4. 界面清新， *** 作人性化

软件风格简约时尚，重点突出，上手容易，让你轻松进入漫画世界！新版书架更能让您轻松管理喜爱的书籍，阅读和追新不再繁琐。

需要准备的材料有彩色卡纸、剪刀和胶水，方法如下：

1、直接将彩色卡纸裁剪成正方形形状。

2、再将正方形卡纸沿对角线两两折叠。

3、将折叠好的三角形沿线剪开，但中心要留大概2至4厘米宽的距离。

4、继续用胶水将四个角隔块粘住在正方形中心。

5、这样一来会得到图示结果即可制作风车了。

---