赛博朋克·故障艺术
eva
🔥最近沉迷赛博朋克，有人感兴趣吗？分享我总结的笔记：
赛博朋克Cyberpunk又称数字朋克、电脑叛客，是科幻小说的一个重要分支，更为完整的元素包括：
黑客、赛博空间、虚拟现实、人工智能、控制论与电脑生化、都市扩张与贫民窟、基因工程、毒品和生化、计算机恐怖、霓虹灯、立体城市、红蓝色调、先进与落后并存、科技顶尖、半机器人
eva
其中，我最喜欢的是故障艺术 GlitchArt
故障艺术最早的灵感来自电子设备成像技术里的“出人意料”的图像错误。后经由艺术家创作，形成一种典型的艺术风格。
产生于我们生活中常见的数字设备发生故障的场景，当电视、电脑等的软件或硬件出现问题后，可能会造成视频音频播放异常，在视觉上，画面变成破碎、带有缺陷的图像，颜色失真。
Glitch
Art
每一次故障的发生都像是打破常规的一次再创造。
eva
推荐一本专门研究Glitch Art书籍《The Glitch Moment(um) 》
可以通过回复：群聊，备注：故障艺术书籍，获取。
今天我正好在练习css实现故障艺术的代码。
参考主要来自于以下2处地址：
segmentfault.com/a/1190000040166704
www.cyberpunk.net
作者介绍了通过css来实现赛博朋克的效果，同时总结css可实现的赛博朋克元素：
- 高对比度
- 故障风格按钮、图片
- 霓虹元素
- 不规则文本框
- 金属质感
shadow
无界
引用我超喜欢程序猿的一句diss用语：
Talk is cheap ,
show me the code
代码见：
codepen.io/shadowcz007-the-sasster/pen/XWRVreW
总结下主要思路：
1 css的伪元素after来实现两个button重叠在一起
2 clip-path使用裁剪方式创建元素的可显示区域（区域内显示、区域外隐藏），用于修改after元素。
3 animation配合css变量来制作动画效果
shadow
ibrand
@shadow 我记得你18年的时候实现过类似的，抖音字体？
对，基于canvas实现了一个抖音字体生成器。
任何领域的知识都需要经过一万小时的刻意练习，所以我每天都保持学习的状态。
今天练习的是基于css的实现和3年前的基于canvas的实现，两者形成了更为完整的知识体系。
shadow
Mixlab
无界社区
以上是MixTalk S01-14的精选，
感谢社区成员的分享
🤖✖️❤️，如果对以上话题感兴趣
👨🏼🎤👩🏻👨🏻💼👤🦸🏻🧑🏻🎤