前言
这几天逛网站浏览网页的时候，看到一个不错的CSS效果，便想来实现一下。整个效果实现起来比较简单，但是并不缺少交互感，因此来分享一下这个CSS效果。
效果展示
HTML 搭建
HTML部分一如既往地简单，认清楚它的布局设计排版，剩下的就靠div一步步搭起来即可。
<div class="light"><div class="wire"></div><div class="bulb"></div><div class="switch"><div class="btn"></div></div></div>
这一部分表示地很清楚，分为三个部分 —— rope，bulb 以及 switch。三个单词意思分别对应绳子、灯泡以及开关，从效果上看正好对应三个部分。
CSS 搭建
CSS部分才是精华了，从效果图我们能看出，灯泡要么用图片实现，要么用CSS写出来，如果图片来实现的话就很简单了，但是我们这里用的是CSS写出一个简易版灯泡的，而灯光切换的效果则是通过控制颜色的变化来实现，至于如何控制，当然是由JS来实现交互，后面会提到。现在我们来实现CSS效果吧。
首先是对整体样式的设置，相关代码如下：
body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #222;}
灯泡样式设计
然后开始用CSS实现灯泡效果了。先来实现灯泡吧。我们先做一个圆形，再往圆形上加入一个类似于灯泡盖的东西即可。具体可参考灯泡图片。至于为什么会加入 z-index 属性，后面会有说明。
.bulb{position: relative;width: 80px;height: 80px;background: #444;border-radius: 50%;z-index: 10;}.bulb::before{content: '';position: absolute;top: -50px;left: 22.5px;width: 35px;height: 80px;background: #444;border-top: 30px solid #000;border-radius: 10px;}
效果如下：
绳子设计
灯泡有了，然后该有个挂灯泡的绳子了，使用绝对定位让它到合适的位置即可。这里需要注意的是层级问题，这就是为什么前面要设置一个 z-index 属性了，如果不注意层级关系的话，会导致绳子出现在灯泡前面。相关代码如下：
.rope{position: absolute;left: calc(50% - 2px);bottom: 50%;width: 4px;height: 60vh;background: #000;}
开关按钮设计
最后就是开关 switch 的样式设计了。
整个效果里除了灯泡就是开关部分了。开关是直接影响到交互体验的，所以需要做得更逼真。
.switch{position: absolute;bottom: 50px;right: 50px;width: 80px;height: 80px;background: linear-gradient(#eee,#eee,#eee);border: 3px solid #000;border-radius: 10px;display: flex;justify-content: center;align-items: center;}
整体来看还是很容易处理的，在开关里有个按钮，因此在 switch 样式中使用 flex 布局，为后续加入的按钮做好水平居中效果。
完成 switch 的布局，按钮处理起来就很方便了。基本上和处理 switch 样式一个思路。这里加入了cursor: pointer，表示当鼠标移动到按钮是箭头会变成小手，让点击的过程更形象。
.switch .btn{position: relative;width: 25px;height: 40px;background: linear-gradient(#777,#fff,#777);border-radius: 6px;border: 2px solid #000;cursor: pointer;}
JS 搭建
这里通过JS来实现简单交互，主要是控制灯光切换的效果。在按钮上加一个点击事件，这里应用到 classList.toggle 方法，这个方法可以给DOM元素添加类。
简单点理解就是它可以切换类名，它是实现交互效果的关键方法。相关代码如下：
<script> let btn = document.querySelector('.btn')let body = document.querySelector('body')btn.onclick = function(){body.classList.toggle('on')} </script>
切换后的样式
按钮点击后给body加上on的类名，并在CSS中加入有关于on切换的样式，代码如下：
// 切换后的背景颜色
body.on{background: radial-gradient(#555,#111);
}
为了有更逼真的效果，也给按钮部分设置了切换后的CSS样式，相关代码如下：
.on .switch .btn::before{top: 15%;
}
码上掘金
总结
这是一个很简单的CSS效果，虽然CSS部分和JS部分都不难，很容易理解，但是最终做出来的效果却一点也不失交互性和体验感，整体而言是比较成功的，非常适合大家用它来玩玩CSS，并且可以基于它来增加一些不一样的东西，使得它更加逼真，以此来丰富这个效果。
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
