赛博朋克背景
赛博朋克（Cyberpunk）是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的霓虹灯、街排标志性广告以及高楼建筑等，通常搭配色彩是以黑、紫、绿、蓝、红为主。其中菲利普·狄克所著作的《仿生人会梦到电子羊吗？》最受注目，小说亦被改编成电影《银翼杀手》。总的来讲，赛博朋克的风格主线，就是反应出科技高度发展的人类文明，与脆弱渺小的人类个体之间的强烈反差，同时外界与内在，钢铁与肉体，过去与未来，现实与虚幻等矛盾在其中交织。
赛博朋克风格按钮
效果图片
故障效果主要通过 clip-path: inset 和CSS３动画实现。利用 button 的伪元素 ::after（在被选元素之后插入内容 ），在button::after中给它定义６个分片 --slice 变量，并通过动画切换切片的位置，来实现晃动效果。其中clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
inset() 方法用于定义一个矩形，可以传入 5 个参数，分别对应 top，right，bottom，left的裁剪位置及 round 和 radius（可选，圆角）
以下代码：
ＨＴＭＬ代码
立即加入
ＣＳＳ部分：
下面展示一些内联代码片。
<!doctype html><html><head><meta charset="utf-8"><title>CSS实现赛博朋克风格按钮</title></head><style>button, button::after {width: 300px;height: 86px;font-size: 40px;background: linear-gradient(45deg, transparent 5%, #FF013C 5%);border: 0;color: #fff;letter-spacing: 3px;line-height: 88px;box-shadow: 6px 0px 0px #00E6F6;outline: transparent;position: relative;}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: '立即加入';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;clip-path: var(--slice-0);}button:hover::after {animation: 1s glitch;//设置延时1秒，定义glitch变量在在里面设置动画animation-timing-function: steps(2, end);}@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><body><button>立即加入</button></body></html>
