室外温度已达34度，本博客为您提供云风扇服务

烈日炎炎，快来降温吧！

实现效果

看！很凉快吧！

实现过程

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代码太长了，就不放上来了，如果需要可以留言

结语

我顶着大太阳

只想为你撑伞

你靠在我肩膀

深呼吸怕遗忘

炎炎夏日，头顶风扇，在宿舍敲代码真的很快乐！

室外温度已达34度，本博客提供自助风扇服务相关推荐

K-Means聚类算法及其python实现（已附上代码至本博客）
目录一.算法公式讲解二.算法流程三.算法实现代码四.代码结果分析五.K-Means库函数六.K-Means算法时间复杂度一.算法公式讲解对于 n代表了x有n维,x上标j表示第j维的特征 ...
本博客已废弃。目前迁移至 http://www.sunzhongwei.com 大象笔记
本博客已停止更新. 目前迁移至自己在阿里云服务器上搭建的 http://www.sunzhongwei.com 大象笔记欢迎大家访问新博客. 哈哈
[公告]本博客已迁移到 tpu01yzx.me
本博客已迁移到 https://tpu01yzx.me/p/category/archive/csdn
本博客已转至蚂蚁笔记
如题,本博客已转至蚂蚁笔记链接戳这里主要是好看qaq
物联网产业规模已达万亿，目前的主要应用领域有哪些？
物联网( Internet of Things,简称 IoT ),是新一代信息科技的重要组成部分,是继计算机.互联网之后世界信息发展的第三次浪潮.据统计,2017年中国物联网产业规模已达万亿,我国早已 ...
esp32连接海萤物联网显示南京室外温度
文章目录 esp32连接海萤物联网显示南京室外温度介绍硬件连接温度检测节点温度显示节点温度检测节点提供的服务开源本节点地址服务读取南京室外温度源码温度显示节点显示温度值开源源 ...
AI一分钟 | 腾讯将成立机器人实验室；机器翻译重大突破：中英翻译已达人类水平
整理 | 阿司匹林一分钟AI 腾讯AI Lab宣布与施普林格·自然集团旗下的自然科研正式达成战略合作,并宣布即将成立机器人实验室"Robotics X". 微软与雷德蒙研究院研发 ...
《生活随笔》相关内容将转移到个人微信公众号，本博客专注技术内容。
<生活随笔>已转移到个人微信公众号<盐河>,本博客专注技术内容. <盐河>公众号二维码如下:
黑鲨Android系统耗电高,已达安卓顶配，黑鲨2pro作为主力机，聊聊使用感受
原标题:已达安卓顶配,黑鲨2pro作为主力机,聊聊使用感受可能很多人都想不到,今年已经推出过骁龙855旗舰处理器的高通,在这个7月竟然又带来了新的骁龙855Plus,而这也预示着,下半年即将出现一波 ...

室外温度已达34度，本博客提供自助风扇服务