请在正文的第一句加入 “我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛”

好热啊，空调伤身体，还是吹电扇舒服。

因为疫情，不能出小区，好想疫情早点结束，能去公园划划船、看看荷花、吹吹风啊。

等等，我为什么不能做个荷花大电扇出来呢。想象自己就在公园里看着荷花吹着微风，目光所及，往上看就是蓝天白云，往下看就是杂花生树。

说搞就搞，作为一名后端程序员的我，经过一番调研（也就是后端程序员临时抱佛脚查CSS资料和前端大佬之前写过的小风扇）之后，基本摸到了门路。

先写HTML

定义结构

风扇需要有防护网

还需要有扇叶

<div class="box">
    <div class="main-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>
</body>
复制代码

再搞一搞样式

好不好看的不重要，关键是要大！宽高都来个440px吧

为了调出荷花配色我真的是煞费苦心，终于搞到了：花蕊粉：#ff6d6d、荷叶绿：#13ce66 和蓝天蓝：#1E9FFF

我可真是个小机灵鬼

html,
body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-part {
    width: 440px;
    height: 440px;
    box-sizing: border-box;
    position: relative;
}

.main-part .left-box {
    width: 440px;
    height: 440px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 5px solid #1E9FFF;
}

.main-part .left-box .leaf {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 100px;
    height: 200px;
    margin-left: -25px;
    border-radius: 50%;
    background-color: #13ce66;
    margin-top: -100px;
}

.main-part .left-box .leaf:nth-child(2) {
    transform: rotate(120deg);
    transform-origin: 50% 100%;
}

.main-part .left-box .leaf:nth-child(3) {
    transform: rotate(240deg);
    transform-origin: 50% 100%;
}

.line-box .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 435px;
    height: 3px;
    background-color: #13ce66;
    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: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background-color: #ff6d6d;
    z-index: 11;
    border-radius: 50%;
}
复制代码

调完之后的画风是这样的：

哎呦，我的扇叶怎么从防护网里跑出来了？

抓紧优化一下，要不然有危险，容易伤手。

扇叶正常了，得让风扇转起来呀，不然还是不凉快。

让风扇转一会

样式文件让小风扇转起来

.leaf-ani {
    animation: ani 0.5s infinite linear;
}

@keyframes ani {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
复制代码

js文件找到扇叶元素加上动画

<script>
    let dom = document.getElementById("leaf-id");
    dom.setAttribute("class", "left-box leaf-ani")
</script>
复制代码

看效果

你看：

小风扇中间那花蕊粉，扇叶那荷叶绿，外框那蓝天蓝，再加上背景的白云白。

还有这魔性的转动，在凉爽之余又多了几分仿佛在逛公园的自由。

小风扇.gif

码上掘金

体验了一下码上掘金，还挺好玩的。

体验截图

代码片段

互动

哪位前端大佬指教一下，为啥我的风扇转起来感觉这么魔性！？

最后

感谢阅读，欢迎大家三连：点赞、收藏、投币（关注）！！！

搞了一个佛系荷花大风扇 | 仿佛在逛公园