完成效果
image
出处
作者：CodingStartup起码课
链接：https://juejin.cn/post/6908565208596217863
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
完整代码
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
<style>
@keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}
</style>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f8f005;
}
button,
button::after {
position: relative;
width: 380px;
height: 86px;
line-height: 86px;
font-size: 36px;
/* cursive 为通用字体族名——草书 */
font-family: "Bebas Neue", cursive;
background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
border: 0;
color: #fff;
letter-spacing: 3px;
outline: transparent;
}
button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: "AVAILABLE NOW";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: linear-gradient(
45deg,
transparent 3%,
#00e6f6 3%,
#00e6f6 5%,
#ff013c 5%
);
box-shadow: 6px 0 0 #00e6f6;
text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
clip-path: var(--slice-0);
}
button:hover::after {
animation: glitch 1s;
animation-timing-function: steps(2, end);
}
</style>
</head>
<body>
<button>AVAILABLE NOW</button>
</body>
</html>
# 收获总结
## 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;
这里同时设置了两个文字阴影，将分开来解析：
- 黄色的文字阴影
-3px -3px 0px #f8f005
- 水平阴影的位置：左边，阴影宽度为
3px - 垂直阴影的位置：上面，阴影宽度为
3px - 模糊的距离：
0 - 阴影的颜色：
#f8f005(黄色)
- 蓝色的文字阴影
3px 3px 0px #00e6f6
- 水平阴影的位置：右边，阴影宽度为
3px - 垂直阴影的位置：下面，阴影宽度为
3px - 模糊的距离：
0 - 阴影的颜色：
#00e6f6(蓝色)
4. clip-path
**clip-path** CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
5. CSS3 animation-timing-function 属性
还有个一实用的函数，steps(number_of_steps, direction)，这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。
