夏天到啦，做了一个电子风扇给大家凉快凉快

Sakura_小樱花

已于 2023-06-14 18:13:35 修改

阅读量177

点赞数

文章标签： css css3 html

于 2023-06-14 18:07:21 首次发布

本文链接：https://blog.csdn.net/qq_45709232/article/details/131213355

版权

直接上代码了（忽略我的命名，很不规范。毕竟写着玩玩的）

默认打开1档，数值可以自己改动画里面的时间的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.dianBox{
			width: 200px;
			height: 300px;
			margin: 200px;
		}
		.head{
			width: 200px;
			height: 200px;
			border-radius: 200px;
			border: 1px solid black;
		}
		.headBox{
			width: 200px;
			height: 200px;
			border-radius: 200px;
			position: relative;
		}
		.fan1,.fan2,.fan3{
			width: 60px;
			height: 60px;
			border-radius: 0% 100% 15% 85% / 0% 100% 0% 100%  ;
			background-color: lightgray;
		}
		.fan1{
			transform: rotate(43deg);
			position: absolute;
			top: 24px;
			left: 72px;
		}
		.fan2{
			transform: rotate(-80deg);
			position: absolute;
			top: 95px;
			left: 35px;
		}
		.fan3{
			transform: rotate(-9deg);
			position: absolute;
			top: 96px;
			left: 109px;
		}
		.content{
			width: 20px;
			height: 60px;
			background: sandybrown;
			margin-left: 94px;
		}
		.bottom{
			width: 200px;
			height: 50px;
			background-color: sandybrown;
			display: flex;
			align-items: center;
			padding: 20px;
			box-sizing: border-box;
			justify-content: space-around;
		}
		.btn1,.btn2,.btn3{
			width: 20px;
			height: 20px;
			border-radius: 20px;
			background-color: white;
		}
		.btn3{
			background-color: red;
		}
		@keyframes xuan1{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}
		.dong{
			animation: xuan1 1s linear;
			animation-iteration-count:infinite;
		}
		.dong2{
			animation: xuan1 0.5s linear;
			animation-iteration-count:infinite;
		}
		.hua{
			width: 50px;
			height: 20px;
			border-radius: 20px;
			background-color: darkgray;
			padding: 5px;
			display: flex;
			align-items: center;
			box-sizing: border-box;
		}
		.dot{
			height: 15px;
			width: 15px;
			background: white;
			border-radius: 15px;
		}
		@keyframes huadong {
			to{
				transform: translateX(25px);
			}
		}
		@keyframes huadong1 {
			from{
				transform: translateX(25px);
			}
			to{
				transform: translateX(0px);
			}
		}
		.dothua1{
			animation: huadong1 0.6s linear forwards;
		}
		.dothua{
			animation: huadong 0.6s linear forwards;
		}
		@keyframes colorclose {
			from{
				background-color: burlywood;
			}
			to{
				background-color: gray;
			}
		}
		@keyframes colorup{
			from{
				background-color: gray;
			}
			to{
				background-color: burlywood;
			}
		}
		.close{
			animation: colorclose 0.6s linear forwards;
		}
		.up{
			animation: colorup 0.6s linear forwards;
		}
		.btnUp{
			background-color: red;
		}
		</style>
	</head>
	<body>
	    <div class="dianBox">
			<div class="head">
				<div class="headBox">
					<div class="fan1"></div>
					<div class="fan2"></div>
					<div class="fan3"></div>
				</div>
			</div>
			<div class="content"></div>
			<div class="bottom">
				<div class="btn1"></div>
				<div class="btn2"></div>
	    <div class="hua btn3">
			<div class="dot"></div>
		</div>
			</div>
		</div>
	</body>
	<script>
	  var oHeadBox = document.getElementsByClassName('headBox')[0]
	  var dot = document.getElementsByClassName('dot')[0]
	  var oBtn1 = document.getElementsByClassName('btn1')[0]
	  var oBtn2 = document.getElementsByClassName('btn2')[0]
	  var oBtn3 = document.getElementsByClassName('btn3')[0]
	  var oHua = document.getElementsByClassName('hua')[0]
	  var isKai = false
	  oHua.addEventListener('click',()=>{
		  if(isKai){
			  dot.classList.remove('dothua')
			  dot.classList.add('dothua1')
			  oHua.classList.remove('up')
			  oHua.classList.add('close')
			  isKai = false
		  }else{
			  dot.classList.remove('dothua1')
			  dot.classList.add('dothua')
			  oHua.classList.remove('close')
			  oHua.classList.add('up')
			  isKai = true
		  }
	  })
	  var isbtn1 = false
	  oBtn1.addEventListener('click',()=>{
		  oHeadBox.classList.remove('dong2')
		  oHeadBox.classList.add('dong')
		  oBtn1.classList.add('btnUp')
		  isbtn1 = true
		  if(isbtn2){
			  oBtn2.classList.remove('btnUp')
		  }
		  isKai = false
		  oBtn3.click()
	  })
	  var isbtn2 = false
	  oBtn2.addEventListener('click',()=>{
		 oHeadBox.classList.remove('dong')
	  	 oHeadBox.classList.add('dong2')
		 oBtn2.classList.add('btnUp')
		 isbtn2 = true
		  isKai = false
		  oBtn3.click()
		  if(isbtn1){
		    oBtn1.classList.remove('btnUp')
		  }
	  })
	  
	  oBtn3.addEventListener('click',()=>{
		  if(isKai){
			  oHeadBox.classList.add('dong')
			  oBtn1.classList.add('btnUp')
			  isbtn1 = true
		  }else{
			  oHeadBox.classList.remove('dong')
			  oHeadBox.classList.remove('dong2')
			  oBtn1.classList.remove('btnUp')
			  oBtn2.classList.remove('btnUp')
		  }
	  })
	</script>
</html>

复制粘贴直接就用