炎炎夏日，给jym送一个会动的小风扇带来凉意

IT学习日记

发布于 2022-09-13 16:14:46

2580

发布于 2022-09-13 16:14:46

文章被收录于专栏：IT知识进阶学习IT知识进阶学习

前言

正处炎炎夏日，作为一个程序员，有啥法子能让自己凉快些呢？ 嗯，心静自然凉，看来要借助一些外物从精神方面先让自己静下来，思来想去，不如写个小风扇吧。

说明： 博主作为一名后端开发者，前端知识已经许久未接触，编写代码中如若存在问题，欢迎jym在评论指出。

绘制小风扇

一、绘制个小风扇布局

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <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>
<div class="box">
    <!--风扇头-->
    <div class="top-part">
        <!--风扇中的铁线和中间的圆圈-->
        <div class="line-box">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <!--风扇头的圆圈-->
            <div class="mid-dot"></div>
        </div>
        <!--风扇头中的三个扇形-->
        <div class="left-box" id="leaf-id">
            <div class="leaf"></div>
            <div class="leaf"></div>
            <div class="leaf"></div>
        </div>
    </div>

    <!--风扇手柄和档位-->
    <div class="bom-part">
        <div class="item" onclick="handleGear(1)">1</div>
        <div class="item" onclick="handleGear(2)">2</div>
        <div class="item" onclick="handleGear(3)">3</div>
        <div class="item" onclick="handleGear()">C</div>
    </div>
</div>
</body>
</html>

二、绘制风扇中的扇形和把柄样式与播放动画

<style type="text/css">
    /*清除主标签间距，并设置为弹性布局，居中对齐*/
    html,
    body {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*设置风扇大小和相对定位*/
    .box {
        position: relative;
        width: 220px;
        height: 420px;
    }

    /*设置风扇头容器大小，相对定位、盒子模型*/
    .top-part {
        width: 220px;
        height: 220px;
        box-sizing: border-box;
        position: relative;
    }

    /*设置风扇头外形边框*/
    .top-part .left-box {
        width: 220px;
        height: 220px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 10px solid rgba(101, 148, 145, 1);
    }

    /*设置风扇头中的三个扇形页相关属性*/
    .top-part .left-box .leaf {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 100px;
        margin-left: -25px;
        /*这只为椭圆形*/
        border-radius: 50%;
        background-color: rgb(98, 218, 235);
        margin-top: -100px;
    }
    /*第二篇扇形*/
    .top-part .left-box .leaf:nth-child(2) {
        /*翻转角度*/
        transform: rotate(120deg);
        /*设置旋转元素的基点位置*/
        transform-origin: 50% 100%;
    }
    /*第三片扇形*/
    .top-part .left-box .leaf:nth-child(3) {
        transform: rotate(240deg);
        transform-origin: 50% 100%;
    }

    /*风扇头的六条铁线属性*/
    .line-box .line {
        position: absolute;
        /*居中*/
        top: 50%;
        left: 0px;
        width: 212px;
        height: 2px;
        background-color: rgba(101, 148, 145, 1);
        /*设置铁线在扇形之上*/
        z-index: 10;
    }

    .line-box .line:nth-child(2) {
        transform: rotate(30deg);
    }

    .line-box .line:nth-child(3) {
        transform: rotate(60deg);
    }

    .line-box .line:nth-child(4) {
        transform: rotate(90deg);
    }

    .line-box .line:nth-child(5) {
        transform: rotate(120deg);
    }

    .line-box .line:nth-child(6) {
        transform: rotate(150deg);
    }

    /*扇形头中间圆点的属性*/
    .line-box .mid-dot {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 48px;
        height: 48px;
        margin-left: -27px;
        margin-top: -24px;
        background-color: rgba(101, 148, 145, 0.91);
        /*圆点元素位于最上方*/
        z-index: 11;
        border-radius: 50%;
    }

    /*风扇把手属性*/
    .bom-part {
        width: 50px;
        height: 200px;
        background-color: rgba(101, 148, 145, 0.91);
        position: absolute;
        top: 215px;
        left: 50%;
        margin-left: -25px;
    }

    /*档位属性*/
    .bom-part .item {
        color: white;
        width: 22px;
        height: 22px;
        background-color: rgb(146, 221, 232);
        border-radius: 50%;
        font-size: 13px;
        display: flex;
        /*设置文字水平垂直居中*/
        justify-content: center;
        align-items: center;
        margin: 0px auto;
        margin-top: 15px;
        cursor: pointer;
    }

    /*动画效果，表示不同档位风扇的转动速度，infinite表示无限次，linear表示匀速播放*/
    .leaf-ani1 {
        animation: ani 1s infinite linear;
    }

    /*第二档*/
    .leaf-ani2 {
        animation: ani 0.6s infinite linear;
    }

    /*第三档*/
    .leaf-ani3 {
        animation: ani 0.2s infinite linear;
    }

    /*定义动画的周期行为，转动角度*/
    @keyframes ani {
        /*动画开始状态*/
        0% {
            transform: rotate(0);
        }
        /*动画结束状态*/
        100% {
            transform: rotate(360deg);
        }
    }
</style>

三、设置交互动作让风扇转动起来

 <script type="text/javascript">
 function handleGear(type) {
     let dom = document.getElementById("leaf-id");
     if (type) {
         dom.setAttribute("class", "left-box leaf-ani"+type)
     } else {
         dom.setAttribute("class", "left-box");
     }
 } 
 </script>

四、最终效果

写在最后

使用程序编写小风扇到此结束了，感觉还不错呀，虽然不能够真正使用它进行物理降温，但是通过自己所学能够实现想要的效果，心中多少有些欣慰，天气也没那么热了。

代码已经在码上掘金平台发布了，有需要大家可以查看哦：

小风扇

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/08/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

炎炎夏日，给jym送一个会动的小风扇带来凉意

炎炎夏日，给jym送一个会动的小风扇带来凉意

前言

绘制小风扇

写在最后

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐