用 CSS3 实现抖音的故障艺术

Author： YH_evIs
发布时间：July 24, 2020
25329views
No comments
5427字数
Categories： CSS 手册

<div class="tip inlineBlock warning">相关效果图在页面底部，可以直接拉至页面底部查看</div>

## 简介

回想校园时期博主还是个艺术生——~~做起相关作业令人头秃~~，记得当时的有一节课里我们的艺术系老师就教我们如何去用PS设计一个类似于抖音的故障艺术(可以看他们的logo)：

https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4

现在我们来试试使用前端技术实现一个同样，或者更好的效果。

---

## 实现

首先我们需要知道实现原理是什么以及实现这个效果的相关参数有什么用，先说实现原理：

对色彩有基础的朋友会知道显示器散发出的所有光色是由RGB（红绿蓝的缩写）三原色组成的，而rgb每个参数的参数区间为1-255，当三种颜色的参数都为255时就会成为白光，即rgb(255,255,255)。

> 三原色的数字化也就是我平时所说的RGB（red green blue）标准，主流标准都是使用8bit的二进制位来表示一种原色，8个bit也就是一个字节，RGB也被称为24bit颜色，一共需要三个字节组成，每一个字节的数学范围是2的8次方=0-255，一共256种颜色，比如红色分量R，0表示没有任何红色，255表示最亮的红色，RGB三个字节全0表示纯黑，RGB三个字节全为255，表示最亮的白色。但是早期的数字电视机标准范围却不是0-255，而是16-235，同样用R来举例的话，16表示没有任何红色，235表示最亮的红色，低于16等同于16，高于235等同于235。这种色彩范围称为RGB Limited(有限范围RGB)这导致实际上早期数字电视机能显示的色彩范围比RGB Full（全范围RGB）小。但是电脑相关的操作系统、显卡、显示屏默认都是把RGB Full作为基本标准的。

而我们要做的就是利用这个特性使得多个颜色混合成为中间的白光主色自己成为辅色，如图：

理解原理后我们就可以学习用css3来实现了，相关参数大致是用于定位的position，用于调色的滤镜filter，以及用于实现动画效果的animation和@keyframes，若需要详细信息可以看下方的列表：

````html
<div class="text-magic" data-word="YH_evIs">
<div class="white"></div>
</div>
<style>
body,
html {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}

.text-magic {
position: absolute;
top: 40%;
left: 65%;
transform: translate(-50%, -50%) scale(2.5);
width: 300px;
font-size: 36px;
font-family: Raleway, Verdana, Arial;
color: transparent;
}
.white {
position: absolute;
left: -10px;
width: 100%;
height: 1px;
background: #000;
z-index: 4;
animation: whiteMove 10s ease-out infinite;
}

.text-magic::before {
content: attr(data-word);
position: absolute;
top: 0;
left: 0;
height: 36px;
color: red;
overflow: hidden;
z-index: 2;
filter: contrast(200%);
text-shadow: 1px 0 0 red;
animation: move 0.95s infinite;
}

.text-magic::after {
content: attr(data-word);
position: absolute;
top: 0;
left: -1px;
height: 36px;
color: rgba(255, 255, 255, 0.8);
overflow: hidden;
z-index: 3;
color: cyan;
filter: contrast(200%);
text-shadow: -1px 0 0 cyan;
mix-blend-mode: lighten;
animation: move 1.1s infinite -0.5s;
}

@keyframes whiteMove {
9% {
top: 38px;
}
14% {
top: 8px;
}
18% {
top: 42px;
}
22% {
top: 1px;
}
32% {
top: 32px;
}
34% {
top: 12px;
}
40% {
top: 26px;
}
43% {
top: 7px;
}
99% {
top: 30px;
}
}

@keyframes move {
10% {
top: -0.4px;
left: -1.1px;
}
20% {
filter: hue-rotate(-90deg);
top: 0.4px;
left: -0.2px;
}
30% {
filter: hue-rotate(0);
left: .5px;
}
40% {
top: -0.3px;
left: -0.7px;
}
50% {
filter: blur(1px);
left: 0.2px;
}
60% {
filter: blur(0);
top: 1.8px;
left: -1.2px;
}
70% {
top: -1px;
left: 0.1px;
}
80% {
top: -0.4px;
left: -0.9px;
}
90% {
left: 1.2px;
}
100% {
left: -1.2px;
}
}
</style>

````

<div class="tip inlineBlock info">下面这个效果图为页面实时渲染（不是GIF），所以为了定位效果博主缩小了元素体积以便兼容手机端的阅读。</div>
`<div class="html"><div class="body"><div class="text-magic" data-word="YH_evIs"> <div class="white"></div> </div></div></div> <style> .body, .html { width: 300px; height: 200px; background: #000; overflow: hidden;position: relative; } .text-magic { position: absolute; top: 30%; left: 440px; transform: translate(-50%, -50%) scale(2.5); width: 300px; font-size: 18px; font-family: Raleway, Verdana, Arial; color: transparent; } .white { position: absolute; left: -10px; width: 100%; height: 1px; background: #000; z-index: 4; animation: whiteMove 10s ease-out infinite; } .text-magic::before { content: attr(data-word); position: absolute; top: 0; left: 0; height: 36px; color: red; overflow: hidden; z-index: 2; filter: contrast(200%); text-shadow: 1px 0 0 red; animation: move 0.95s infinite; } .text-magic::after { content: attr(data-word); position: absolute; top: 0; left: -1px; height: 36px; color: rgba(255, 255, 255, 0.8); overflow: hidden; z-index: 3; color: cyan; filter: contrast(200%); text-shadow: -1px 0 0 cyan; mix-blend-mode: lighten; animation: move 1.1s infinite -0.5s; } @keyframes whiteMove { 9% { top: 38px; } 14% { top: 8px; } 18% { top: 42px; } 22% { top: 1px; } 32% { top: 32px; } 34% { top: 12px; } 40% { top: 26px; } 43% { top: 7px; } 99% { top: 30px; } } @keyframes move { 10% { top: -0.4px; left: -1.1px; } 20% { filter: hue-rotate(-90deg); top: 0.4px; left: -0.2px; } 30% { filter: hue-rotate(0); left: .5px; } 40% { top: -0.3px; left: -0.7px; } 50% { filter: blur(1px); left: 0.2px; } 60% { filter: blur(0); top: 1.8px; left: -1.2px; } 70% { top: -1px; left: 0.1px; } 80% { top: -0.4px; left: -0.9px; } 90% { left: 1.2px; } 100% { left: -1.2px; } } </style>`

Last modification：July 24th, 2020 at 07:04 pm

如果觉得我的文章对你有用，请随意赞赏

用 CSS3 实现抖音的故障艺术

YH_evIs • 2020 年 07 月 24 日

<div class="tip inlineBlock warning">相关效果图在页面底部，可以直接拉至页面底部查看</div>

## 简介

https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4

现在我们来试试使用前端技术实现一个同样，或者更好的效果。

---

## 实现

首先我们需要知道实现原理是什么以及实现这个效果的相关参数有什么用，先说实现原理：

而我们要做的就是利用这个特性使得多个颜色混合成为中间的白光主色自己成为辅色，如图：

````html
<div class="text-magic" data-word="YH_evIs">
<div class="white"></div>
</div>
<style>
body,
html {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}

@keyframes whiteMove {
9% {
top: 38px;
}
14% {
top: 8px;
}
18% {
top: 42px;
}
22% {
top: 1px;
}
32% {
top: 32px;
}
34% {
top: 12px;
}
40% {
top: 26px;
}
43% {
top: 7px;
}
99% {
top: 30px;
}
}

````

用 CSS3 实现抖音的故障艺术

Leave a Comment Cancel reply

Hello world

【学习笔录】每周一道算法题：斐波那契数列

我的第一篇博客文章

【学习笔录】每周一道算法题：括号生成

【学习笔录】每周一道算法题：串联字串

博客欢迎页面

【电子书】安迪沃霍尔的哲学

五种开源协议

班级官网

【学习笔录】每周一道算法题：Dota2 参议员

用 CSS3 实现抖音的故障艺术