话不多说直接附代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手持小风扇</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
/* 旋转效果动画 */
@keyframes chang {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 设置风扇整体样式 */
#feng {
width: 250px;
height: 500px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
/* background-color: rgb(68, 14, 50); */
}
/* 内壳 */
#back_mask {
width: 250px;
height: 250px;
background-color: rgb(255, 193, 193);
border-radius: 50%;
z-index: 2;
position: absolute;
left: 0;
top: 0;
}
/* 外壳 罩子 */
#zhaozi {
width: 240px;
height: 240px;
border: 5px solid rgb(253, 134, 134);
border-radius: 50%;
z-index: 4;
position: absolute;
left: 0;
top: 0;
}
#zhaozi ul {
width: 100%;
height: 100%;
}
/* 罩子 */
#zhaozi ul li {
width: 239px;
height: 2px;
background-color: rgb(217, 247, 255);
position: absolute;
top: 118px;
}
#zhaozi ul li:nth-child(1) {
transform: rotate(13deg);
}
#zhaozi ul li:nth-child(2) {
transform: rotate(30deg);
}
#zhaozi ul li:nth-child(3) {
transform: rotate(45deg);
}
#zhaozi ul li:nth-child(4) {
transform: rotate(60deg);
}
#zhaozi ul li:nth-child(5) {
transform: rotate(75deg);
}
#zhaozi ul li:nth-child(6) {
transform: rotate(90deg);
}
#zhaozi ul li:nth-child(7) {
transform: rotate(105deg);
}
#zhaozi ul li:nth-child(8) {
transform: rotate(120deg);
}
#zhaozi ul li:nth-child(9) {
transform: rotate(135deg);
}
#zhaozi ul li:nth-child(10) {
transform: rotate(150deg);
}
#zhaozi ul li:nth-child(11) {
transform: rotate(165deg);
}
#zhaozi ul li:nth-child(12) {
transform: rotate(180deg);
}
/* 中心点样式 */
#yuan {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(252, 118, 118);
line-height: 50px;
left: 90px;
top: 90px;
text-align: center;
position: absolute;
color: white;
font-size: 16px;
}
/* 设置包裹扇叶的div样式 */
#ye-div {
width: 250px;
height: 250px;
position: absolute;
z-index: 3;
animation: chang 0s linear 1s infinite;
}
/*设置扇叶的统一样式*/
.ye {
width: 90px;
height: 90px;
background-color: rgb(123, 238, 241);
position: absolute;
left: 35px;
top: 35px;
border-radius: 50% 50% 0 50%;
}
/* 角度 */
#ye2 {
transform-origin: right bottom;
transform: rotate(120deg);
}
#ye3 {
transform-origin: right bottom;
transform: rotate(240deg);
}
/* 手持 */
#zhu {
width: 50px;
height: 200px;
border: 3px solid rgb(252, 118, 118);
border-radius: 0 0 10% 10%;
background-color: rgb(253, 134, 134);
position: absolute;
left: 100px;
top: 240px;
z-index: 1;
}
/* 设置按钮样式 */
.d-btn {
position: absolute;
top: 20px;
left: 12px;
}
.btn {
margin-top: 10px;
width: 20px;
height: 20px;
border: 1px solid rgb(252, 118, 118);
border-radius: 50%;
background-color: rgb(123, 238, 241);
color: rgb(252, 118, 118);
font-size: 16px;
position: static;
}
#b1 {
left: 45px;
top: 45px;
}
#b2 {
left: 70px;
top: 45px;
}
#b3 {
left: 95px;
top: 45px;
}
#b4 {
left: 120px;
top: 45px;
}
</style>
<div id="feng">
<div id="back_mask"></div>
<div id="zhaozi">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="yuan">ljxz</div>
</div>
<div id="ye-div">
<!-- 扇叶 -->
<div id="ye1" class="ye"></div>
<div id="ye2" class="ye"></div>
<div id="ye3" class="ye"></div>
</div>
<!-- 柱子 -->
<div id="zhu">
<div class="d-btn">
<button id="b1" class="btn">0</button>
<button id="b2" class="btn">1</button>
<button id="b3" class="btn">2</button>
<button id="b4" class="btn">3</button>
</div>
</div>
</div>
<script>
window.onload = function () {
var oBtn = document.getElementsByClassName('btn');//获取按钮
var oYe = document.getElementById('ye-div');//获取扇叶节点旋转时转包裹了所有扇叶的盒子
//用js和css动画
for (let i = 0; i < oBtn.length; i++) {
if (i == 0) {
oBtn[0].onclick = function () {//当点击0按钮时停止转动
oYe.style.animationPlayState = 'paused';//将动画状态设置为暂停
}
} else {
oBtn[i].onclick = function () {
oYe.style.animationPlayState = 'running';
//速度
oYe.style.animationDuration = 400 - i * 100 + 'ms';
}
}
}
//用定时器
// var timer;
// for(let i = 0; i < oBtn.length; i++){
// if(i == 0){
// oBtn[0].onclick = function() {//当点击0按钮时停止转动
// clearInterval(timer);
// }
// }else{
// oBtn[i].onclick = function() {
// var d = 0;
// //为防止多次点击按钮设置多个定时器
// if(timer){
// clearInterval(timer);//清除
// }
// timer = setInterval(function() {//设置定时器
// if(d >= 360){
// d = 0;
// }
// d += i * 20;
// oYe.style.transform = 'rotate(' + d + 'deg)'
// },50 - (i * 10))
// }
// }
// }
}
</script>
</body>
</html>