先写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>
看效果
你看：
小风扇中间那花蕊粉，扇叶那荷叶绿，外框那蓝天蓝，再加上背景的白云白。
还有这魔性的转动，在凉爽之余又多了几分仿佛在逛公园的自由。
码上掘金
体验了一下码上掘金，还挺好玩的
。
体验截图
