<html>
<head>
<meta charset="UTF-8">
<title>动态风车</title>
<style>
* {
margin: 0
padding: 0
}
body {
background-color: purple
overflow: hidden
}
ul {
position: relative
width: 100px
height: 100px
top: 100px
left: 50%
margin-left: -50px
transform-style: preserve-3d
animation: sport 15s linear 0s infinite normal
}
ul:hover {
animation: sport 1.5s linear 0s infinite normal
}
@keyframes sport {
form {
transform: rotateZ(0deg)
}
to {
transform: rotateZ(360deg)
}
}
ul li {
position: absolute
top: 0
left: 0
border: 50px solid transparent
list-style: none
}
li.li_1st {
border-bottom: 50px solid #5697FD
transform: translateY(-70px) rotateZ(45deg)
}
li.a {
border: 35px solid transparent
border-bottom: 35px solid #5687E7
transform: translate(50px,-20px) rotateZ(90deg)
}
li.li_2nd {
border-bottom: 50px solid #A1BD76
transform: translateX(70px) rotateZ(135deg)
}
li.b {
border: 35px solid transparent
border-bottom: 35px solid #3AA37A
transform: translate(50px,50px) rotateZ(180deg)
}
li.li_3th {
border-bottom: 50px solid #FFB12C
transform: translateY(70px) rotateZ(225deg)
}
li.c {
border: 50px solid transparent
border-bottom: 50px solid #FFCD34
transform: translate(0px,0px) rotateZ(45deg)
z-index: 1
}
li.li_4th {
border-bottom: 50px solid #EF7A64
transform: translateX(-70px) rotateZ(315deg)
}
li.d {
border: 35px solid transparent
border-bottom: 35px solid #C1523E
transform: translate(-20px,-20px) rotateZ(0deg)
}
div.e {
position: relative
width: 10px
height: 200px
background-color: gray
top: 50px
left: 49.5%
z-index: -1
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="li_1st"></li>
<li class="a"></li>
<li class="li_2nd"></li>
<li class="b"></li>
<li class="li_3th"></li>
<li class="c"></li>
<li class="li_4th"></li>
<li class="d"></li>
</ul>
<div class="e"></div>
</div>
</body>
</html>
简易的风车制作方法如下。首先我们先准备好制作风车需要的材料。
02先将彩纸按照对角进行折叠，然后展开，再对另外两个角进行折叠，再展开。
03然后将四个对角剪开2/3左右。
04将四个角交错向纸中心折，注意这里需要超出中心1cm左右的距离。
05然后再用胶水固定好。
06将风车翻过来，将双面胶粘在中心位置。
07最后再把棒针粘上去，这样整个风车就制作好了。
准备一张正方形纸，将纸张对角对折两次，打开，沿着折痕剪开一半，将四边的一角往中点折，用双面胶固定，再用纽扣作装饰即可。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）