您的位置：首页 > Web前端 > CSS

原生js与css3结合的电风扇

2016-07-29 15:51 609 查看

最近学习了css3，就琢磨做些东西练练手。

点击此处可查看动态效果：点击查看

下面是自己写的一个电风扇，使用了原生js中的定时器和css3的一些属性

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style>
.fangshan {
margin: 100px auto 0 auto;
width: 200px;
height: 600px;
}
.box2 {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #000;
position: relative;
}
#nob1 {
width: 50px;
height: 50px;
border-radius: 50%;
background: #000;
position: absolute;
left: 38%;
top: 38%;
z-index: 3;
}
.nob {
width: 50px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 0;
left: 78px;
}
#nob2 {
background: red;
transform-origin: 50% bottom;
transition: transform 1s linear;
}
#nob3 {
transform: rotate(240deg);
left: 75px;
top: 0px;
background: green;
transform-origin: 50% bottom;
transition: transform 1s linear;
}
#nob4 {
transform: rotate(120deg);
left: 75px;
top: 0px;
background: blue;
transform-origin: 50% bottom;
transition: transform 1s linear;
}
.shu {
width: 20px;
height: 300px;
background: #ccc;
box-shadow: 2px 0 2px 2px #dedede;
margin-left: 87px;
position: relative;
}
.pan {
width: 200px;
height: 50px;
border-radius: 50%;
margin-top: -25px;
background: #ccc;
}
.n {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background: #aaa;
color: #fff;
left: 2.5px;
text-align: center;
cursor: pointer;
}
#n1 {
top: 50px;
}
#n2 {
top: 80px;
}
#n3 {
top: 110px;
}
#n4 {
top: 140px;
}
</style>
</head>
<body>
<div class="fangshan">
<div class="box2">
<div id="nob1"></div>
<div class="nob" id="nob2"></div>
<div class="nob" id="nob3"></div>
<div class="nob" id="nob4"></div>
</div>
<div class="shu">
<div class="n" id="n1">1</div>
<div class="n" id="n2">2</div>
<div class="n" id="n3">3</div>
<div class="n" id="n4">关</div>
</div>
<div class="pan"></div>
</div>
<script>
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var n3 = document.getElementById("n3");
var n4 = document.getElementById("n4");
var i=1;
var interval;
function change3(num){
nob2.style.transform = "rotate("+i*360+"deg)";
nob2.style.transition = "transform "+num+"ms linear";
var num2 = i*360+240;
nob3.style.transform = "rotate("+num2+"deg)";
nob3.style.transition = "transform "+num+"ms linear";
var num3 = i*360+120;
nob4.style.transform = "rotate("+num3+"deg)";
nob4.style.transition = "transform "+num+"ms linear";
i++;
}
n1.onclick=function(){
clearInterval(interval);
change3(1000);
interval = setInterval(function(){
change3(1000);
},1000);
};
n2.onclick=function(){
clearInterval(interval);
change3(500);
interval = setInterval(function(){
change3(500);
},500);
};
n3.onclick=function(){
clearInterval(interval);
change3(200);
interval = setInterval(function(){
change3(200);
},200);
};
n4.onclick=function(){
clearInterval(interval);
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航