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

html-css06

在html中怎么同时让几个风车同时旋转,第1张

<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、直接将彩色卡纸裁剪成正方形形状。

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

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

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

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