1）按钮问题：例如小灯，你要准备两套图片，一套灰色的灯代表关闭，另一套黄色的灯代表打开。当点击小灯后，利用JS代码把灰灯图片替换成黄灯图片。OFF和ON按钮处理方法相同。当然，要先点击ON后小灯才能被点亮，这与现实生活中的风扇一样，OFF时小灯是不能被点亮的。
2）风扇旋转问题：CSS3有新功能：object.style.transform="rotate(10deg)" ，表示将这个元素旋转10度。要让风扇转起来，你要做两件事：1是准备一张风扇的图片；2当按下ON按钮后启动定时器SetInterva，每隔一定时间就用上述旋转命令转动风扇图片。时间越短转得越快。当选择不同的速度时，修改不同的的定时器定时参数。比如1档时间为100毫秒（旋转最快），2档200毫秒，3档300毫秒（旋转最慢）。具体数值要看最终效果而定。
希望有用。
<!DOCTYPE HTML><html>
<head>
<meta charset=UTF-8>
<title>YuGiOh</title>
<style type="text/css">
*{
margin:0
padding:0
}
#div {
position: absolute
top: 50px
left: 300px
width: 200px
height: 200px
line-height: 200px
text-align: center
border: 1px solid black
background-color:#fd3
}
</style>
<script type="text/javascript">
var deg = 0
var rotateHTML5 = function(limit) {
deg += limit
deg = deg > 360 ? 1 : deg
div.style['transform'] = div.style['-webkit-transform'] = 'rotate(' + deg + 'deg)'
}
var rotateIE = function(obj) {
var d = !! obj.d ? obj.d : 1
var r = d * Math.PI / 180
costheta = Math.cos(r)
sintheta = Math.sin(r)
obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()"
var item = obj.filters.item(0)
var width = obj.clientWidth
var height = obj.clientHeight
item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2
item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2
item.M11 = costheta
item.M12 = -sintheta
item.M21 = sintheta
item.M22 = costheta
obj.timer = setTimeout(function() {
var dx = d + 1
dx = dx > 360 ? 1 : dx
obj.d = dx
rotateIE(obj)
}, 30)
}
var start = function() {
if (!/.*MSIE.*/i.test(navigator.userAgent)) {
if ( !! div.interval) {
clearInterval(div.interval)
div.interval = null
} else {
div.interval = setInterval(function() {
rotateHTML5(1)
}, 30)
}
} else {
if ( !! div.timer) {
clearTimeout(div.timer)
div.timer = null
} else {
rotateIE(div)
}
}
}
</script>
</head>
<body>
<button onclick="start()">rotate</button>
<div id="div">ROTATE</div>
</body>
</html>
<!doctype html><html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes leafRotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
#fan {
width: 230px
position: absolute
z-index: 10
margin: auto
left: 0
right: 0
top: 150px
}
#fan .header {
width: 230px
height: 230px
position: absolute
left: -15px
top: -15px
background: #42c7ea
border-radius: 50%
z-index: 10
border: 2px solid #0e6873
}
#fan .mask {
width: 200px
height: 200px
border-radius: 50%
border: 2px solid #0e6873
position: relative
background: #e4ecef
z-index: 11
}
#fan .mask .logo {
border: 2px solid #0e6873
border-radius: 50%
position: absolute
width: 80px
height: 90px
text-align: center
line-height: 90px
color: #0e6873
font-size: 14px
top: 53px
left: 58px
background: #42c7ea
z-index: 3
}
#fan .mask .line {
width: 200px
height: 2px
background: #3c8a93
position: absolute
top: 99px
z-index: 2
}
#fan .mask .line_1 {
width: 200px
height: 2px
background: #3c8a93
position: absolute
top: 99px
z-index: 2
}
#fan .mask .line_2 {
width: 200px
height: 2px
background: #3c8a93
position: absolute
top: 99px
z-index: 2
transform: rotate(30deg)
}
#fan .mask .line_3 {
width: 200px
height: 2px
background: #3c8a93
position: absolute
top: 99px
z-index: 2
transform: rotate(60deg)
}
#fan .mask .line_4 {
width: 200px
height: 2px
background: #3c8a93
position: absolute
top: 99px
z-index: 2
transform: rotate(90deg)
}
#fan .mask .line_5 {
width: 200px
height: 2px
background: #3c8a93
position: absolute
top: 99px
z-index: 2
transform: rotate(120deg)
}
#fan .mask .line_6 {
width: 200px
height: 2px
background: #3c8a93
position: absolute
top: 99px
z-index: 2
transform: rotate(150deg)
}
#fan .mask .leafs {
z-index: 1
position: absolute
animation: leafRotate 0s infinite linear
transform-origin: center center
width: 200px
height: 200px
}
#fan .mask .leafs .leaf {
width: 72px
height: 60px
border-radius: 20% 40%
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
left: 100px
top: 100px
transform-origin: left top
}
#fan .mask .leafs .leaf_1 {
width: 72px
height: 60px
border-radius: 20% 40%
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
left: 100px
top: 100px
transform-origin: left top
}
#fan .mask .leafs .leaf_2 {
width: 72px
height: 60px
border-radius: 20% 40%
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
left: 100px
top: 100px
transform-origin: left top
transform: rotate(120deg)
}
#fan .mask .leafs .leaf_3 {
width: 72px
height: 60px
border-radius: 20% 40%
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
left: 100px
top: 100px
transform-origin: left top
transform: rotate(240deg)
}
#fan .neck {
width: 40px
height: 70px
border: 2px solid #0e6873
background: #42c7ea
position: absolute
left: 80px
z-index: 9
border-radius: 0 0 5% 5%
}
#fan .neck_footer {
width: 50px
height: 20px
border: 2px solid #0e6873
background: #77e1f1
position: absolute
top: 263px
left: 75px
border-radius: 50%
z-index: 8
}
#fan .bottom {
width: 200px
height: 80px
border-radius: 50%
border: 2px solid #0e6873
background: #42c7ea
position: absolute
top: 250px
left: 0px
z-index: 7
}
#fan .bottom_footer {
width: 20px
height: 20px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 40%
z-index: 6
top: 310px
}
#fan .bottom_footer_1 {
width: 20px
height: 20px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 40%
z-index: 6
top: 310px
left: 20px
}
#fan .bottom_footer_2 {
width: 20px
height: 20px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 40%
z-index: 6
top: 310px
left: 160px
}
#fan .switch {
position: absolute
width: 24px
height: 24px
top: 296px
z-index: 13
opacity: 0
cursor: pointer
}
#fan .switch_btn {
display: inline-block
text-align: center
width: 18px
height: 20px
line-height: 20px
font-size: 12px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 50%
color: #0e6873
cursor: pointer
top: 296px
z-index: 12
transform: rotateX(45deg)
}
#fan .switch_0 {
position: absolute
width: 24px
height: 24px
top: 296px
z-index: 13
opacity: 0
cursor: pointer
left: 50px
}
#fan .switch_0:checked + div + input + div + input + div + input + div + .mask .leafs {
animation-play-state: paused
}
#fan .switch_1 {
position: absolute
width: 24px
height: 24px
top: 296px
z-index: 13
opacity: 0
cursor: pointer
left: 75px
}
#fan .switch_1:checked + div {
background: #a9af27
color: #0e6873
}
#fan .switch_1:checked + div + input + div + input + div + .mask .leafs {
animation-duration: 0.7s
}
#fan .switch_2 {
position: absolute
width: 24px
height: 24px
top: 296px
z-index: 13
opacity: 0
cursor: pointer
left: 100px
}
#fan .switch_2:checked + div {
background: #a9af27
color: #0e6873
}
#fan .switch_2:checked + div + input + div + .mask .leafs {
animation-duration: 0.4s
}
#fan .switch_3 {
position: absolute
width: 24px
height: 24px
top: 296px
z-index: 13
opacity: 0
cursor: pointer
left: 125px
}
#fan .switch_3:checked + div {
background: #a9af27
color: #0e6873
}
#fan .switch_3:checked + div + .mask .leafs {
animation-duration: 0.3s
}
#fan .switch_btn_0 {
display: inline-block
text-align: center
width: 18px
height: 20px
line-height: 20px
font-size: 12px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 50%
color: #0e6873
cursor: pointer
top: 296px
z-index: 12
transform: rotateX(45deg)
left: 50px
}
#fan .switch_btn_1 {
display: inline-block
text-align: center
width: 18px
height: 20px
line-height: 20px
font-size: 12px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 50%
color: #0e6873
cursor: pointer
top: 296px
z-index: 12
transform: rotateX(45deg)
left: 75px
}
#fan .switch_btn_2 {
display: inline-block
text-align: center
width: 18px
height: 20px
line-height: 20px
font-size: 12px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 50%
color: #0e6873
cursor: pointer
top: 296px
z-index: 12
transform: rotateX(45deg)
left: 100px
}
#fan .switch_btn_3 {
display: inline-block
text-align: center
width: 18px
height: 20px
line-height: 20px
font-size: 12px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 50%
color: #0e6873
cursor: pointer
top: 296px
z-index: 12
transform: rotateX(45deg)
left: 125px
}
#fan .on_off {
position: absolute
width: 40px
height: 20px
top: 296px
z-index: 13
left: 80px
opacity: 0
cursor: pointer
}
#fan .on_off:checked + div {
box-shadow: none
}
#fan .on_off:checked + div + .mask .leafs {
animation: leafRotate 2s 1 ease-out
animation-delay: 1s
animation-fill-mode: forwards
}
#fan .on_off_btn {
display: inline-block
text-align: center
width: 40px
height: 20px
line-height: 20px
font-size: 12px
background: #bdcc2b
border: 2px solid #0e6873
position: absolute
border-radius: 50%
color: #0e6873
cursor: pointer
top: 296px
z-index: 12
left: 80px
box-shadow: inset 2px 2px 6px #555
}
</style>
</head>
<body>
<div id="fan">
<input type="radio" name="switch" class="switch_0">
<div class="switch_btn_0">0</div>
<input type="radio" checked="" name="switch" class="switch_1">
<div class="switch_btn_1">1</div>
<input type="radio" name="switch" class="switch_2">
<div class="switch_btn_2">2</div>
<input type="radio" name="switch" class="switch_3">
<div class="switch_btn_3">3</div>
<div class="mask">
<div class="logo">风扇</div>
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
<div class="line_4"></div>
<div class="line_5"></div>
<div class="line_6"></div>
<div class="leafs">
<div class="leaf_1"></div>
<div class="leaf_2"></div>
<div class="leaf_3"></div>
</div>
</div>
<div class="header"></div>
<div class="neck"></div>
<div class="neck_footer"></div>
<div class="bottom"></div>
<div class="bottom_footer_1"></div>
<div class="bottom_footer_2"></div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）