<html>
<head>
<meta charset="UTF-8">
<title>动态风车</title>
<style>
body {
background: purple
overflow: hidden
}
* {
margin: 0
padding: 0
}
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: 257px
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>
您好，您的问题实现起来并不复杂。我说一下思路吧。1）按钮问题：例如小灯，你要准备两套图片，一套灰色的灯代表关闭，另一套黄色的灯代表打开。当点击小灯后，利用JS代码把灰灯图片替换成黄灯图片。OFF和ON按钮处理方法相同。当然，要先点击ON后小灯才能被点亮，这与现实生活中的风扇一样，OFF时小灯是不能被点亮的。
2）风扇旋转问题：CSS3有新功能：object.style.transform="rotate(10deg)" ，表示将这个元素旋转10度。要让风扇转起来，你要做两件事：1是准备一张风扇的图片；2当按下ON按钮后启动定时器SetInterva，每隔一定时间就用上述旋转命令转动风扇图片。时间越短转得越快。当选择不同的速度时，修改不同的的定时器定时参数。比如1档时间为100毫秒（旋转最快），2档200毫秒，3档300毫秒（旋转最慢）。具体数值要看最终效果而定。
希望有用。
