（转载）纯 CSS 制作赛博朋克 2077 “故障风”按钮

完成效果

image

出处

作者：CodingStartup起码课
链接：https://juejin.cn/post/6908565208596217863
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

完整代码

AVAILABLE NOW

# 收获总结
## 1. [CSS linear-gradient() 函数](https://www.runoob.com/cssref/func-linear-gradient.html)

语法：
```css
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

解析：

linear-gradient(45deg, transparent 5%, #ff013c 5%);

• 从 45deg 开始（即左下角到右上角）
• 0% ~ 5% 是 transparent 透明色
• 从 5% 到 结束都是 #ff013c 色

2. CSS3 box-shadow 属性

语法：

box-shadow: h-shadow v-shadow blur spread color inset

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

解析：

box-shadow: 6px 0 0 #00e6f6;

• 水平阴影的位置：右边，宽度为 6px
• 垂直阴影的位置：没有
• 阴影的颜色：#00e6f6

3. CSS3 text-shadow 属性

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

解析：

text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;

这里同时设置了两个文字阴影，将分开来解析：

1. 黄色的文字阴影

-3px -3px 0px #f8f005

• 水平阴影的位置：左边，阴影宽度为 3px
• 垂直阴影的位置：上面，阴影宽度为 3px
• 模糊的距离：0
• 阴影的颜色：#f8f005 (黄色)

2. 蓝色的文字阴影

3px 3px 0px #00e6f6

• 水平阴影的位置：右边，阴影宽度为 3px
• 垂直阴影的位置：下面，阴影宽度为 3px
• 模糊的距离：0
• 阴影的颜色：#00e6f6 (蓝色)

4. clip-path

**clip-path** CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

5. CSS3 animation-timing-function 属性

还有个一实用的函数，steps(number_of_steps, direction)，这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。