<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、这样一来会得到图示结果即可制作风车了。