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

语言: CN / TW / HK

theme: cyanosis

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

这几天逛网站浏览网页的时候,看到一个不错的CSS效果,便想来实现一下。整个效果实现起来比较简单,但是并不缺少交互感,因此来分享一下这个CSS效果。

效果展示

light.gif

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; } 效果如下:

image.png

绳子设计

灯泡有了,然后该有个挂灯泡的绳子了,使用绝对定位让它到合适的位置即可。这里需要注意的是层级问题,这就是为什么前面要设置一个 z-index 属性了,如果不注意层级关系的话,会导致绳子出现在灯泡前面。相关代码如下: .rope{ position: absolute; left: calc(50% - 2px); bottom: 50%; width: 4px; height: 60vh; background: #000; }

开关按钮设计

最后就是开关 switch 的样式设计了。

image.png

整个效果里除了灯泡就是开关部分了。开关是直接影响到交互体验的,所以需要做得更逼真。 .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%; }

btn.gif

码上掘金

代码片段

总结

这是一个很简单的CSS效果,虽然CSS部分和JS部分都不难,很容易理解,但是最终做出来的效果却一点也不失交互性和体验感,整体而言是比较成功的,非常适合大家用它来玩玩CSS,并且可以基于它来增加一些不一样的东西,使得它更加逼真,以此来丰富这个效果。