原生js与css3结合的电风扇
2024-03-23 02:53:01
最近学习了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>
最新文章
- 通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[下]：管道是如何构建起来的？
- [转]Installing python 2.7 on centos 6.3. Follow this sequence exactly for centos machine only
- TextView.setTextColor颜色值的理解
- 巧用translate设置元素垂直水平居中
- 在ios8中做的屏幕旋转功能
- MySQL和PHP基础考试错题回顾
- 【Mood 16 】史上最全github使用方法：github入门到精通
- linux安装配置sendmail实现邮件发送
- CSS: Float a div on another div, Ex: Text caption on picture
- Android Studio 导入项目错误
- weblogic Connection has already been closed解决方法
- Java-IO之管道（PipedInputStream和PipedOutputStream）
- 视音频编解码学习工程：AAC格式分析器
- 循环语句之for循环
- B树索引分裂
- PAT甲题题解-1130. Infix Expression (25)-中序遍历
- 20155312 2006-2007-2 《Java程序设计》第三周学习总结
- hive里的group by和distinct
- 题解 P1894 【[USACO4.2]完美的牛栏The Perfect Stall】
- html 中 input 控制输入百分比数值范围（0.0-100）