<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>
<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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）