<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 利用隐藏属性。将好几个风车旋转角度的画面重叠放在一起，然后显示条件为变量“显示”分别为1,2,3,4.等等。建立一个变量“开始旋转”及其控制按钮， 在动画连接里面的“d起”里 编写
if(\\本站点\开始旋转==0)
\\本站点\开始旋转=1
else
\\本站点\开始旋转=0
然后在画面属性里命令语言里编写
if( \\本站点\显示<=4&&\\本站点\开始旋转==1)
\\本站点\显示= \\本站点\显示+1
if( \\本站点\显示>4)
\\本站点\显示= 0
注意，命令语言里时间最好选择100毫秒 这样旋转的快一点
<!DOCTYPE html><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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）