纯CSS实现赛博朋克风按钮

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情 >>

前言

这几天闲着没事，把许久没玩的穿越火线捡起来了，自己号儿之前冲了一堆英雄级，后来号不玩儿了就丢给弟弟了，结果上去一看仓库里多了一堆金灿灿的，有把M4特有赛博朋克风，本来是想着看能不能拿css复刻一下，结果做下来实在是太复杂了，遂放弃，然后想着做一个赛博朋克风的按钮也不错

实现

• 首先，首先定义一个div标签作为按钮，类名为 .btn

<div class="btn">I LOVE JUEJIN</div>

• 编写.btn的基本样式，宽高字体等

.btn{
  font-family: 'Do Hyeon', sans-serif;
  width: 260px;
  height: 80px;
  text-align: center;
  font-size: 22px;
  line-height: 80px;
  color: rgb(255,251,251);
  background: linear-gradient(30deg, transparent 10%, rgb(38, 0, 253) 10% 95%, rgb(228, 93, 40) 95%);
  box-shadow: 5px 0 0 rgb(0,204,255);
  cursor: pointer;
  position: relative;
}

background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);

巧妙利用背景色做出裁掉角的形状。这句语句表示以30度角开始显示渐变颜色，0到10%显示transparent透明色，10%到95%显示蓝色，95%到100%显示橙色。

• 然后，通伪类选择器，给after添加样式，先给after添加上和.btn一样的样式,这里需要通过 ，选择器

.btn::after{
  content: 'I LOVE JUEJIN';
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: -5px -2px 0 rgb(0, 183, 255), 5px 2px 0 rgb(0, 255, 115);
  visibility: hidden;

}

• clip-path 属性可以裁切部分区域，transform 可以进行变换。

clip-path: inset(20% -5px 60% 0); transform: translate (-5px,0);

 clip-path: inset(50% -5px 30% 0);

• 接下来，就是依赖clip-path和transform：translate属性，写一个变换的@keyframes,在鼠标经过的时候，添加动画即可。

.btn:hover::after{
  animation: dou 1s;
  animation-timing-function: steps(1, end);
}
@keyframes dou {
  0%{
    clip-path: inset(20% -5px 60% 0);
    transform: translate(-5px, 6px);
    visibility: visible;
  }
  10%{
    clip-path: inset(50% -5px 30% 0);
    transform: translate(6px, -5px);
  }
  20%{
    clip-path: inset(20% -5px 60% 0);
    transform: translate(5px, 0px);
  }
  30%{
    clip-path: inset(50% -5px 5% 0);
    transform: translate(-8px, 5px);
  }
  40%{
    clip-path: inset(0% -5px 80% 0);
    transform: translate(-4px, -3px);
  }
   50%{
    clip-path: inset(50% -5px 30% 0);
    transform: translate(-6px, -5px);
  }
   60%{
    clip-path: inset(80% -5px 5% 0);
    transform: translate(-7px, 5px);
  }
   70%{
    clip-path: inset(0% -5px 80% 0);
    transform: translate(3px, 6px);
  }
   80%{
    clip-path: inset(50% -5px 30% 0);
    transform: translate(5px, 5px);
  }
   90%{
    clip-path: inset(20% -5px 60% 0);
    transform: translate(6px, -5px);
  }
   100%{
    clip-path: inset(0% -5px 80% 0);
    transform: translate(1px, 5px);
  }
}

完整代码以代码片段的形式引入