這麼簡單的 CSS 動效，快來瞧瞧
theme: cyanosis
本文正在參加「金石計劃 . 瓜分6萬現金大獎」
前言
這幾天逛網站瀏覽網頁的時候，看到一個不錯的CSS效果，便想來實現一下。整個效果實現起來比較簡單，但是並不缺少交互感，因此來分享一下這個CSS效果。
效果展示
HTML 搭建
HTML部分一如既往地簡單，認清楚它的佈局設計排版，剩下的就靠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元素添加類。
簡單點理解就是它可以切換類名，它是實現交互效果的關鍵方法。相關代碼如下：
```
```
切換後的樣式
按鈕點擊後給body加上on的類名，並在CSS中加入有關於on切換的樣式，代碼如下：
// 切換後的背景顏色
body.on{
background: radial-gradient(#555,#111);
}
為了有更逼真的效果，也給按鈕部分設置了切換後的CSS樣式，相關代碼如下：
.on .switch .btn::before{
top: 15%;
}
碼上掘金
總結
這是一個很簡單的CSS效果，雖然CSS部分和JS部分都不難，很容易理解，但是最終做出來的效果卻一點也不失交互性和體驗感，整體而言是比較成功的，非常適合大家用它來玩玩CSS，並且可以基於它來增加一些不一樣的東西，使得它更加逼真，以此來豐富這個效果。