点击关注公众号,“技术干货” 及时达!
起因
最近公司事情不是太多,我趁着这段时间在网上学习一些Cool~
的效果。今天我想和大家分享一个故障时钟的效果。很多时候,一个效果开始看起来很难,但是当你一步步摸索之后,就会发现其实它们只是由一些简单的效果组合而成的。
![3d2d02451afcc62d2c0caba39e55b99c.gif](https://i-blog.csdnimg.cn/blog_migrate/313c67f80e7cdcde7126417306b626f9.gif)
什么是故障效果(Glitch)
❝"glitch" 效果是一种模拟数字图像或视频信号中出现的失真、干扰或故障的视觉效果。它通常表现为图像的一部分或整体闪烁、抖动、扭曲、重叠或变形。这种效果常常被用来传达技术故障、数字崩溃、未来主义、复古风格等主题,也经常在艺术作品、音乐视频、电影、广告和网页设计中使用。Glitch 效果通常通过调整图像、视频或音频的编码、解码或播放过程中的参数来实现。来自ChatGPT
❞
可以看到关键的表现为一部分或整体闪烁、抖动、扭曲、重叠或变形
,所以我们应该重点关注用CSS
实现整体闪烁、抖动、扭曲、重叠或变形
CSS
实现闪烁
❝Glitch 闪烁通常是指图像或视频中出现的突然的、不规则的、瞬间的明暗变化或闪烁效果
❞
那么我们有没有办法通过CSS
来实现上述的效果,答案是通过随机不规则的clip-path
来实现!
我们先来看看clip-path
的定义与用法
❝「
❞clip-path
」 CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
"M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
再想想所谓的Glitch
故障闪烁时的效果是不是就是部分画面被切掉了~
span {
display: block;
position: relative;
font-size: 128px;
line-height: 1;
animation: clock 1s infinite linear alternate-reverse;
}
@keyframes clock {
0%{
clip-path: inset(0px 0px calc(100% - 10px) 0);
}
100%{
clip-path: inset(calc(100% - 10px) 0px 0px 0);
}
}
此时的效果如下:
![3e4de5d858459a86ba94b5437264e567.gif](https://i-blog.csdnimg.cn/blog_migrate/e927e0e2725740757a4635b25dc8cf52.gif)
啥啥啥,这看着是什么呀根本不像闪烁效果嘛,先别急,想想我们闪烁效果的定义突然的、不规则的、瞬间的明暗变化
,此时因为我们是在切割整体元素,如果我们再后面再重叠一个正常元素!
span {
display: block;
position: relative;
font-size: 128px;
line-height: 1;
//animation: clock 1s infinite linear alternate-reverse;
&:before{
display: block;
content: attr(data-time);
position: absolute;
top: 0;
color: $txt-color;
background: $bg-color;
overflow: hidden;
width: 720px;
height: 128px;
}
&:before {
left: -2px;
animation: c2 1s infinite linear alternate-reverse;
}
}
@keyframes c2 {
0%{
clip-path: inset(0px 0px calc(100% - 10px) 0);
}
100%{
clip-path: inset(calc(100% - 10px) 0px 0px 0);
}
}
![7d2aee3d16feff5bddd26a1fdc716aef.gif](https://i-blog.csdnimg.cn/blog_migrate/cd11531a77906b15296b82957df1a2cf.gif)
可以看到通过手动偏移了-2px
后然后不断剪裁元素已经有了一定的闪烁效果,但是目前的闪烁效果过于呆滞死板,我们通过scss
的随机函数优化一下效果。
@keyframes c2 {
@for $i from 0 through 20 {
#{percentage($i / 20)} {
$y1: random(100);
$y2: random(100);
clip-path: polygon(0% $y1 * 1px, 100% $y1 * 1px, 100% $y2 * 1px, 0% $y2 * 1px);
}
}
23% {
transform: scaleX(0.8);
}
}
此时效果如下
![4beb03b5652fd53e900f9d941c5cd02d.gif](https://i-blog.csdnimg.cn/blog_migrate/53889fa07a8922cf1c48adfaa38d0f1b.gif)
可以看到闪烁的效果已经很强烈了,我们依葫芦画瓢再叠加一个元素上去使得故障效果再强烈一些。
span {
display: block;
position: relative;
font-size: 128px;
line-height: 1;
&:before,
&:after {
display: block;
content: attr(data-time);
position: absolute;
top: 0;
color: $txt-color;
background: $bg-color;
overflow: hidden;
width: 720px;
height: 128px;
}
&:before {
left: calc(-#{$offset-c2});
text-shadow: #{$lay-c2} 0 #{$color-c2};
animation: c2 1s infinite linear alternate-reverse;
}
&:after {
left: #{$offset-c1};
text-shadow: calc(-#{$lay-c1}) 0 #{$color-c1};
animation: c1 2s infinite linear alternate-reverse;
}
}
![6d685dd5f4d3ebc376e99144af72f969.gif](https://i-blog.csdnimg.cn/blog_migrate/7994a02aed44c0ba95b0aa43720f866c.gif)
此时我们已经通过:before
和:after
叠加了相同的元素并且一个设置蓝色一个设置红色,让故障效果更真实!
CSS
实现扭曲效果
上述的效果已经非常贴近我们传统意义上理解的Glitch
效果了,但是还差了一点就是通常表现为图像的一部分或整体闪烁、抖动、扭曲、重叠或变形
中的扭曲
和变形
,碰巧的是CSS
实现这个效果非常容易,来看看~
❝「
❞skewX()
」 函数定义了一个转换,该转换将元素倾斜到二维平面上的水平方向。它的结果是一个<transform-function>
数据类型。
![c69d5643b0c9e53b23d1b85a327d8954.jpeg](https://i-blog.csdnimg.cn/blog_migrate/2c998adaa11ed2bf05434e25dde29383.jpeg)
Cool~
最后一块拼图也被补上了~~
@keyframes is-off {
0%, 50%, 80%, 85% {
opacity: 1;
}
56%, 57%, 81%, 84% {
opacity: 0;
}
58% {
opacity: 1;
}
71%, 73% {
transform: scaleY(1) skewX(0deg);
}
72% {
transform: scaleY(3) skewX(-60deg);
}
91%, 93% {
transform: scaleX(1) scaleY(1) skewX(0deg);
color: $txt-color;
}
92% {
transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
color: green;
}
}
来看看完整的效果和代码吧!jcode
结语
春风若有怜花意,可否许我再少年。
感谢Glitch Clock