最近关注了油管上的 CSS Animation Effects Tutorial 系列，外面介绍了十分多有意思的 CSS 动效。其中第一个就是很酷炫的霓虹灯成果，这里就实现思路做一个简略的记录和分享。

这是要实现的成果：

能够看到，在鼠标移入按钮的时候，会产生相似霓虹灯光的成果；在鼠标移出按钮的时候，会有一束光沿着固定的轨迹（按钮外围）静止。

霓虹灯光的实现

霓虹灯光的实现比较简单，用多重暗影来做即可。咱们给按钮加三层暗影，从内到外每层暗影的含糊半径递增，这样的多个暗影叠加在一起，就能够造成一个相似霓虹灯光的成果。这段的代码如下：

HTML：

 <div class="light">    Neon Button </div>

CSS：

body { background: #050901;   }.light {  width: fit-content;  padding: 25px 30px;  color: #03e9f4;  font-size: 24px;  text-transform: uppercase;  transition: 0.5s;  letter-spacing: 4px;  cursor: pointer;}.light:hover {  background-color: #03e9f4;  color: #050801;  box-shadow: 0 0 5px #03e9f4,              0 0 25px #03e9f4,              0 0 50px #03e9f4,              0 0 200px #03e9f4;}

最终的成果如下：

静止光束的实现

尽管看起来只有一个光束沿着按钮的边缘运动，但实际上这是四个光束沿着不同方向静止之后叠加的成果。它们静止的方向别离是：从左往右、从上往下、从右往左、从下往上，如下图所示：

在这个过程中，光束和光束之间产生了交加，如果只看按钮的边缘局部，就很像是只有一个光束在做顺时针方向的静止。

上面是具体实现中几个须要留神的点：

  • 四个光束别离对应 div.light 的四个子 div，初始地位别离是在按钮的最左侧、最上方、最右侧和最下方，并依照固定的方向做反复的静止
  • 每个光束的高度或宽度都很小（只有 2px），并且都有一个从通明色到霓虹色的突变，因而表面会有一个收束的成果（即看上去不是一条残缺的线条）
  • 为了确保咱们看到的是一个顺时针方向的静止，四个光束的静止实际上是有序的，首先是按钮上方的光束开始静止，在一段时间后，右侧的光束静止，在一段时间后，下方的光束静止，在一段时间后，左侧的光束静止。光束和光束之间的静止有一个提早，以上方和右侧的光束为例，如果它们同时开始静止，因为右侧的静止间隔小于上方的静止间隔，就会导致这两个光束错过相交的机会，咱们看到的就会是断开的、不连贯的光束。既然右侧光束的静止间隔比拟短，为了让上方光束能够“追上”它，咱们就得让右侧光束“提早登程”，因而要给它一个动画提早；同理，残余两个光束也要有一个动画提早。多个动画提早之间大略相差 0.25 秒即可。
  • 只须要显示按钮边缘的光束就够了，因而给 div.light 设置一个溢出暗藏

代码如下：

HTML：

<div class="light">    <div></div>    <div></div>    <div></div>    <div></div>    Neon Button</div>

CSS：

.light {  position: relative;  padding: 25px 30px;  color: #03e9f4;  font-size: 24px;  text-transform: uppercase;  transition: 0.5s;  letter-spacing: 4px;  cursor: pointer;  overflow: hidden;}.light:hover {  background-color: #03e9f4;  color: #050801;  box-shadow: 0 0 5px #03e9f4,              0 0 25px #03e9f4,              0 0 50px #03e9f4,              0 0 200px #03e9f4;}.light div {  position: absolute;}.light div:nth-child(1){  width: 100%;  height: 2px;  top: 0;  left: -100%;  background: linear-gradient(to right,transparent,#03e9f4);  animation: animate1 1s linear infinite;}.light div:nth-child(2){  width: 2px;  height: 100%;  top: -100%;  right: 0;  background: linear-gradient(to bottom,transparent,#03e9f4);  animation: animate2 1s linear infinite;  animation-delay: 0.25s;}.light div:nth-child(3){  width: 100%;  height: 2px;  bottom: 0;  right: -100%;  background: linear-gradient(to left,transparent,#03e9f4);  animation: animate3 1s linear infinite;  animation-delay: 0.5s;}.light div:nth-child(4){  width: 2px;  height: 100%;  bottom: -100%;  left: 0;  background: linear-gradient(to top,transparent,#03e9f4);  animation: animate4 1s linear infinite;  animation-delay: 0.75s;}@keyframes animate1 {  0% {    left: -100%;  }  50%,100% {    left: 100%;  }}@keyframes animate2 {  0% {    top: -100%;  }  50%,100% {    top: 100%;  }}@keyframes animate3 {  0% {    right: -100%;  }  50%,100% {    right: 100%;  }}@keyframes animate4 {  0% {    bottom: -100%;  }  50%,100% {    bottom: 100%;  }}

这样就能够达到文章结尾图片的成果了。

不同色彩的霓虹灯

如果想要其它色彩的霓虹灯光成果怎么办呢？是否须要把相干的色彩从新批改一遍？其实咱们有更简略的办法，就是应用 filter:hue-rotate(20deg) 一次性批改 div.light 和外部所有元素的色相/色调。

The hue-rotate() CSS function rotates the hue of an element and its contents.

最终成果如下：