赛博朋克 “故障风”按钮

先放个实现效果

整体借鉴思路

https://mp.weixin.qq.com/s/zf6cIjlDFhg_2qH6hQghNg

这里说下比较关键的点：

1. 按钮左下角的隐藏

/* 45°斜角，从透明变色到红色 */
background: linear-gradient(45deg, transparent 5%, red 15%);

2. 故障动画

2.1 需要一个样式相同的伪元素，覆盖在按钮上。并且按钮设置text-shadow阴影（造成视觉上的光亮模糊）

2.2 通过clip裁剪伪元素的样式，需要裁剪多个不同的位置

clip-path在chrome下没能正常work，所以用clip替换

/* 比如：裁剪一个矩形，上右下左如下，一个起始位置20px的宽拉满高10px矩形 */
clip: rect(20px, 386px, 30px, 0px);

2.3 设置动画，显示不同的裁剪位置并位移

设置到50%留下一半的时间恢复原状，以便视觉上暂停一会再继续重复动画

steps(4, end)是设置卡顿感

.btn:hover::after {  --slice-0: rect(0px, 0px, 0px, 0px);--slice-1: rect(20px, 386px, 30px, 0px);--slice-2: rect(40px, 386px, 50px, 0px);--slice-3: rect(50px, 386px, 60px, 0px);--slice-4: rect(76px, 386px, 86px, 0px);content: 'AVAILABLE NOW';display: block;left: 0;top: 0;/* 内联高度 */line-height: 86px;/* 斜角渐变里，加一点蓝色 */background: linear-gradient(45deg, transparent 3%, #00e6f6 5%, red 5%);/* 文本阴影，可以添加多个，逗号相隔 */text-shadow: -3px -3px 0px yellow, 3px 3px 0px #00e6f6;/* 默认状态裁剪不显示，后续动画改 */visibility: hidden;/* 动画 执行2秒 */animation: 1.6s steps(4, end) 0s infinite normal glitch;
}

@keyframes glitch {/* translate实现视觉上的小移动 */0% {visibility: visible;clip: var(--slice-3);transform: translate(-20px, -10px);}5% {clip: var(--slice-2);transform: translate(10px, 10px);}10% {clip: var(--slice-4);transform: translate(-10px, 10px);}15% {clip: var(--slice-1);transform: translate(0px, 0px);}20% {clip: var(--slice-4);transform: translate(-5px, 0px);}25% {clip: var(--slice-3);transform: translate(5px, 0px);}30% {clip: var(--slice-0);transform: translate(0);}35% {clip: var(--slice-3);transform: translate(-10px, 10px);}40% {clip: var(--slice-1);transform: translate(20px, -10px);}45% {clip: var(--slice-2);transform: translate(-10px, 0px);}50% {visibility: hidden;clip: var(--slice-1);transform: translate(0);}
}

赛博朋克 “故障风”按钮相关推荐

纯 CSS 制作赛博朋克 2077 “故障风”按钮
转自:CodingStarup juejin.cn/post/6908565208596217863 大家好,我是 Steven. 虽然我不打机,但我都知道赛博朋克 2077 这个游戏,在它的网页上 ...
牛B！纯 CSS 制作赛博朋克 2077 “故障风”按钮
(给前端瓶子君加星标) 转自:CodingStarup juejin.cn/post/6908565208596217863 大家好,我是 Steven. 虽然我不打机,但我都知道赛博朋克 2077 ...
CSS之帅气朋克字体效果以及“故障风”按钮的实现（图片+按钮）
欢迎来到HTML部件频道
文字抖动_如何用PS制作故障风文字效果
今天教大家如何用PS制作故障文字效果 1.首先我们新建一个1920X1080宽高文档,背景颜色为黑色,72分辨率 2.使用文字工具,这里我输入Photoshop,调整文字的大小和位置,如下图 3.右键 ...
AE教程丨1分钟学会制作信号故障风特效
信号故障风近几年还是很流行的,如何让自己的设计里也能有一些信号故障风的风格呢?今天的教程就来帮助大家学习AE制作故障风视频. AE制作信号故障风视频效果教程 1.在绘图工具内制作相应的文字海报并导入到 ...
ppt制作流行的“抖音故障风”字体教程
哈喽,大家好,今天教大家制作抖音故障风文字. 抖音作为如今最火的社交媒体软件之一,抖音的Logo也曾给大家留下过非常深刻的印象.这一个小小的音符Logo,配上抖音特有的风格,看上去丝毫不单调且别有韵味 ...
ai故障风字体_“私人电台”- 故障风字效设计教程
原标题:"私人电台"- 故障风字效设计教程本篇作者:李买今天,给大家带来一篇关于"故障风格"的字效设计小教程. 故障风格,是2017年掀起的一股设计热潮,在 ...
用ps制作抖音故障风效果教程
前言:大家想要的抖音故障风来了,如果一分钟快速完成操作- 1.先找到一张你喜欢的爱豆的照片,当然也可以是你喜欢的任意图像,打开ps置背景层 2.新建图层,设置渐变 3.在图层拉渐变,并且设置混合模式为 ...
CSS项目之浮雕风按钮
css实现浮雕风按钮 HTML布局 <!DOCTYPE html> <html lang="en"> <head><meta charse ...

赛博朋克 “故障风”按钮

先放个实现效果

整体借鉴思路

赛博朋克 “故障风”按钮相关推荐

最新文章

热门文章