由于电费太贵，本博客提供云风扇服务
【摘要】 由于电费太贵，本博客提供云风扇服务烈日炎炎，快来降温吧！ 实现效果看！很凉快吧！ 实现过程HTML结构首先先从html开始，我们将顶部的文字和下面的风扇分成2个部分，再将风扇和切换按钮分离，对于风扇结构来说，我相信很多人会以为==这是图片==，但是其实这个是通过border-radius属性画出的扇页形状，再通过==2根横竖的棍子==拼接成了风扇的形状<div class="fan"> ...
由于电费太贵，本博客提供云风扇服务
烈日炎炎，快来降温吧！
实现效果
看！很凉快吧！
实现过程
- HTML结构
首先先从html开始，我们将顶部的文字和下面的风扇分成2个部分，再将风扇和切换按钮分离，对于风扇结构来说，我相信很多人会以为==这是图片==，但是其实这个是通过border-radius属性画出的扇页形状，再通过==2根横竖的棍子==拼接成了风扇的形状
<div class="fan">
<div class="title">//文字
...
</div>
<div class="container">
<div class="header">//风扇头
...
</div>
<div class="stick"></div>//棍子
<div class="footer"></div>//底座
<div class="switch">//按钮
...
</div>
</div>
</div>
- CSS样式
这个demo比较有一点点难度的地方在扇叶部分，主要思路是，将扇叶的一端定位到圆心上，再通过border-radius来调节扇叶形状，对于三张扇叶的处理，我们先将他们定位在一起，再通过旋转将他们分开，形成一个环绕圆心的效果
.leaf {
position: absolute;
top: 140px;
left: 140px;
width: 100px;
height: 78px;
border: 10px solid black;
border-radius: 19% 50%;
transform-origin: 0 0;
}/*给所有扇叶添加样式*/
.leaf-1 {
transform: rotate(120deg);/*旋转开*/
}
.leaf-2 {
transform: rotate(240deg);
}
- 旋转效果
实现旋转效果的方法有很多，js定时器，css3等都可以实现，这里采用css3的动画来实现。首先，先写一个旋转动画，能够使风扇转起来，再通过js来调控风扇的开关
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1080deg);
}
}
.leafs {
animation: rotate 0s infinite linear;
}/*扇叶的外层盒子*/
就像这样我们确保了动画效果无误后，将动画时间设置为==0s==
- 控制转速
通过点击不同的按钮，实现转速的改变，也就是动画时间的改变，默认风扇是关闭的，当我们点击1到3档时，我们给leafs添加动画时间，也就是档数越大动画时间越短
switch (index) {
case '0':
rot(0)
leafs.classList.add('out')
break;
case '1':
leafs.classList.remove('out')
rot(2)
break;
case '2':
leafs.classList.remove('out')
rot(1.3)
break;
case '3':
leafs.classList.remove('out')
rot(.7)
break;
}
function rot(rate) {
leafs.style.animationDuration = `${rate}s`
}
通过点击不同的按钮传入不同的rate实现控制转速的功能
- 关闭时缓慢停止
你可能会发现在上面的代码中，会有一个类名的出现out，这个就是我用来实现缓慢停止的核心了，在点击关闭时，重新给扇叶leafs添加一个结束动画
.out {
animation: lastRotate 2.6s 1 ease-out !important;
}
这样在用户点击关闭按钮时，会先将原本的动画时间设置为0，再添加新的动画，这个动画是一个ease-out效果，速度会减慢从而实现了缓慢停止的功能
实现效果一般，转速过快时，速度还是会有突变的效果
实现代码
HTML代码
<!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>
<link rel="stylesheet" href="fan.css">
<script src="fan.js"></script>
</head>
<body>
<div class="fan">
<div class="title">
<h2>夏日清凉云风扇<br>
<p class="small">“你看，风扇转了，好凉快”</p>
</h2>
</div>
<div class="container">
<div class="header">
<div class="leafs">
<div class="circle"></div>
<div class="leaf leaf-1"></div>
<div class="leaf leaf-2"></div>
<div class="leaf leaf-3"></div>
</div>
</div>
<div class="stick"></div>
<div class="footer"></div>
<div class="switch">
<div class="selected" id="close">关</div>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
</div>
</div>
</div>
</body>
</html>
JS代码
window.addEventListener('load', function () {
let leafs = document.querySelector('.leafs');
let switchBox = document.querySelector('.switch');
let len = switchBox.children.length;
for (let i = 0; i < len; i++) {
switchBox.children[i].setAttribute('data-index', i)
}
switchBox.addEventListener('click', function (e) {
let target = e.target;
for (let i = 0; i < len; i++) {
switchBox.children[i].className = ''
}
target.classList.add('selected');
let index = target.dataset.index;
switch (index) {
case '0':
rot(0)
leafs.classList.add('out')
break;
case '1':
leafs.classList.remove('out')
rot(2)
break;
case '2':
leafs.classList.remove('out')
rot(1.3)
break;
case '3':
leafs.classList.remove('out')
rot(.7)
break;
}
})
function rot(rate) {
leafs.style.animationDuration = `${rate}s`
}
})
css代码太长了，就不放上来了，如果需要可以留言
结语
我顶着大太阳
只想为你撑伞
你靠在我肩膀
深呼吸怕遗忘
炎炎夏日，头顶风扇，在宿舍敲代码真的很快乐！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）