使用HTML5 Canvas的静态/噪声动画 [英] Static/Noise Animation using HTML5 Canvas
本文介绍了使用HTML5 Canvas的静态/噪声动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
因此,我刚刚在 Awwwards 探索了一大批新网站。其中一个特别引起我的注意的是这。我刚刚做了一些基本的中间CSS东西。我想知道这些家伙如何得到噪音/干扰他们的字体?我完全无能为力。尝试检查代码,很难理解。
So I have just explored a whole new bunch of websites at Awwwards. One of them that particularly blew my mind was this. I have just done some basic to intermediate CSS stuff. I was wondering how are these guys getting that noise/disturbance for their fonts ? I am totally clueless. Tried inspecting the code, couldn't understand much.
我知道我不能很快建立整个事情,但我喜欢嘈杂的背景的想法。
I know I am not capable of building the whole thing anytime soon, but I love the idea of the noisy background.
我该如何解决?
推荐答案
这里是Lucas Bebber的Glitch SVG效果。
Here is Lucas Bebber's Glitch SVG effect.
这里是 原创和工作演示
这是代码段
body {
background: black;
font-family: 'Varela', sans-serif;
}
.glitch {
color: white;
font-size: 100px;
position: relative;
width: 400px;
margin: 0 auto;
}
@keyframes noise-anim {
$steps: 20;
@for $i from 0 through $steps {
# {
percentage($i*(1/$steps))
}
{
clip: rect(random(100)+px, 9999px, random(100)+px, 0);
}
}
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
@keyframes noise-anim-2 {
$steps: 20;
@for $i from 0 through $steps {
# {
percentage($i*(1/$steps))
}
{
clip: rect(random(100)+px, 9999px, random(100)+px, 0);
}
}
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<div class="glitch" data-text="GLITCH">GLITCH</div>
这篇关于使用HTML5 Canvas的静态/噪声动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文