赛博朋克故障风

最新推荐文章于 2024-04-03 15:25:02 发布
最新推荐文章于 2024-04-03 15:25:02 发布
阅读量788 收藏 2
点赞数 3
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41531604/article/details/113185274
版权

前两天看到Steven大佬发的一个赛博朋克故障风的文章，觉着挺感兴趣，自己就试着敲了一下，话不多说，上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style>
			body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #F8F005;
}

button, button::after {
  width: 380px;
  height: 86px;
  font-size: 36px;
  font-family: 'Bebas Neue', cursive;
  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: 'AVAILABLE NOW';
  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;
  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>
	</head>

	<body>
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

		<button>AVAILABLE NOW</button>
	</body>

</html>

在这里插入图片描述
文件参考 https://mp.weixin.qq.com/s/zf6cIjlDFhg_2qH6hQghNg
视频地址： https://www.bilibili.com/video/BV15A411s7cX

四喜..
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
游戏美术中最常见的故障及其解决方案（2）
ShaderJoy 的兴趣技术杂货铺
05-29 852
材质 名称 症状 原因 解决方案 双线性 mipmap 过滤 在斜角（oblique angles）模糊的纹理 透视投影中的双线性滤波低估了所需的 mipmap 级别的纹理 如果性能折衷是可以接受的，则使用各向异性纹理滤波 sRGB vs 线性颜色 纹理太暗或者导入后褪色，或者粗糙度不对 纹理(至少)有两种格式: 线性颜色或 sRGB。 线性用于数据，而 sRGB 用于人类可读的颜色 1. 在纹理程序中，输出 albedo/diffuse 为 sRGB； 2. 在游戏引擎中，在 al
赛博朋克 “故障风”按钮
mslmsl66的博客
12-29 1229
先放个实现效果 整体借鉴思路 https://mp.weixin.qq.com/s/zf6cIjlDFhg_2qH6hQghNg 这里说下比较关键的点： 1. 按钮左下角的隐藏 /* 45°斜角，从透明变色到红色 */ background:linear-gradient(45deg,transparent5%,red15%); 2. 故障动画 2.1 需要一个样式相同的伪元素，覆盖在按钮上。并且按钮设置text-shadow阴影（造成视觉上的光亮模糊） 2.2 通过clip...
赛博故障效果shader
lingdu670的学习小窝
05-28 1111
这应该算是一个比较简单的效果，但是我不知道有没有更加简洁以及开销更小的做法，大致记录一下自己的思路。 一、基础版 1、首先是贴图
Ps|故障风格效果
算法与编程之美
08-14 724
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！抖音作为当代人...
高品质后处理：十种故障艺术（Glitch Art）算法的总结与实现
【浅墨的游戏编程Blog】毛星云（浅墨）的专栏
06-14 2万+
本文由@浅墨_毛星云出品，转载请注明出处 CSDN版文章链接：https://qianmo.blog.csdn.net/article/details/105350519 知乎专栏版文章链接：https://zhuanlan.zhihu.com/p/148256756 故障艺术（Glitch Art），作为赛博朋克（Cyberpunk）艺术风格的核心元素之一，是一种是将数字设备的软硬件故障引起的破碎变形图像，经过艺术加工而成的一种...
赛博朋克风格素材集锦合计
08-10
所有可以实现的赛博朋克风格
赛博朋克V1.5版完整安装文件
02-21
压缩包共16个。解压后运行文件bin\x64\Cyberpunk2077.exe。
赛博朋克、朋克风PPT
最新发布
05-28
通过压缩包中的“朋克风PPT”文件，你可以找到预设的模板和元素，结合以上知识点进行个性化调整，打造出符合自己需求的赛博朋克风格PPT。在编辑过程中，记得始终保持设计的一致性和专业性，让每个页面都能流畅地连接...
赛博朋克文字效果赛博朋克文字效果
08-12
赛博朋克文字效果
UnityShader之Glitch Art效果
UWA—简单优化，优化简单！
06-17 1561
【博物纳新】是UWA旨在为开发者推荐新颖、易用、有趣的开源项目，帮助大家在项目研发之余发现世界上的热门项目、前沿技术或者令人惊叹的视觉效果，并探索将其应用到自己项目的可行性。很多时候，我们并不知道自己想要什么，直到某一天我们遇到了它。 更多精彩内容请关注：lab.uwa4d.com 导读 电视信号受到干扰，产生画面抖动、色彩漂移等现象，这种电子设备成像故障产生的效果，被应用在赛博朋克等科幻类...
js+css3图像画面故障动画特效特效代码
03-20
js+css3图像画面故障动画特效是一款css3基于transform属性制作电视机信号不稳定图像画面故障效应动画。
Unity Shader - 故障艺术之 - Glitch Art - ImageBlock + Split RGB （区块强度 + 分离通道颜色的故障效果）
Jave.Lin 的学习笔记
06-09 6436
文章目录思路Shader运行效果Back ProjectReferences 参考：- 高品质后处理：十种故障艺术（Glitch Art）算法的总结与实现 - 错位图块故障（Image Block Glitch） Image Block + Split RGB 通道只是其一一种效果 思路 基于前一篇的 Split RGB Glitch： Split RGB 还是比较简单的 现有类似 noise 的 抖动函数 使用 noise 得到的值作为 R, B 通道的偏移采样 那么这一篇就是在 Split RG
CSS之帅气朋克字体效果以及“故障风”按钮的实现（图片+按钮）
Xmumu_的博客
07-24 740
欢迎来到HTML部件频道????前言????CSS伪元素 前言???? 今天来实现一个帅气的朋克效果，这个效果是我很早之前就想出的一篇博客，今天补上，先来看一下效果吧???? 这次的效果主要是通过“clip-path:inset”实现的，可以看到当点击的时候有一种“切割”的感觉，所以在这里分片肯定是不能少的，利用button的伪元素去控制元素的各个部分就Ok,再加上动画去切换分片的位置，来实现晃动的效果???? CSS伪元素 如果有朋友还对CSS伪元素不了解，可以看一下该简单说明和应用，还是非常的详细的：C
赛博朋克2077启动故障解析：vcruntime140.dll缺失问题的全方位解决方案
Xixix777的博客
04-03 797
文章标题：《赛博朋克2077启动故障解析：vcruntime140.dll缺失问题的全方位解决方案》文章内容：在探索夜之城的旅程中，《赛博朋克2077》的玩家们有时会遇到一个颇为头疼的问题：启动游戏时提示“vcruntime140.dll”文件缺失。vcruntime140.dll是Microsoft Visual C++ Redistributable Package的一部分，对于许多Windows应用程序，尤其是游戏的运行至关重要。
牛B！纯 CSS 制作赛博朋克 2077 “故障风”按钮
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-03 580
（给前端瓶子君加星标）转自：CodingStarupjuejin.cn/post/6908565208596217863大家好，我是 Steven。虽然我不打机，但我都知道赛博朋克 2...
Unity Shader学习：故障(Glitch Art)
咪咪博客
08-17 1666
Unity Shader学习：故障(Glitch Art) 原文链接：https://zhuanlan.zhihu.com/p/148256756 c#部分: using System.Collections; using System.Collections.Generic; using UnityEngine; public class GlitchArt : MonoBehaviour { public Material mat; private void OnRenderI
PS故障风海报制作技术分享
IT_studied的博客
09-06 1万+
 　　1.首先找一张看起来很酷的图（也可以选择自己喜欢的图片）； ​ 　　2. 复制图层，点击添加图层样式，选择混合选项，在高级混合里面的通道选项，有R、G、B三个通道选项，默认是全部勾选的状态，选择其中一个勾掉（关于通道应该选择哪一个或者哪几个，可以挨个尝试一下，勾选一个或两个，位移之后的颜色也是不同的）。然后回到图层中，向左移动（移动大概几个像素的距离，让图层有略微的错位感，注意：如果错位...
CSS 实现“故障”特效
全栈前端精选
02-13 1134
前言这些效果要是综合运用到业务中应该很吸引眼球。今日早读文章由腾讯@chokcoco投稿分享。正文从这开始～～本文的主题是 Glitch Art，故障艺术。什么是故障艺术？我们熟知的抖音...
clip-path介绍
热门推荐
曹定栓的博客
08-21 3万+
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
赛博朋克2077风格网页
12-26
以下是实现赛博朋克2077风格网页的几个例子： 1. 高对比度效果： ```css body { background-color: #000; color: #fff; } ``` 2. 不规则图形的文本展示框： ```html <div class="text-box"> <h1>赛博朋克2077</h1> <p>故事发生在夜之城，权力更迭和身体改造是这里不变的主题。</p> </div> <style> .text-box { background-color: #000; color: #fff; padding: 20px; border-radius: 10px; clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值