这么简单的 CSS 动效，快来瞧瞧

前言

这几天逛网站浏览网页的时候，看到一个不错的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，并且可以基于它来增加一些不一样的东西，使得它更加逼真，以此来丰富这个效果。