CSS教程｜一分钟CSS课堂｜文字故障动画「一丢丢敷衍版」#CSS

何快速制作一个“yartdata-sc="sc-Studio">sc-Studio</h1>。

随便来个文字，给文字添加伪元素content：attr(data-sc)；position：absolute；

使用clip-path裁切文字。color：rgb(24443133/40%)。clip-path：inset(0 0% 80% 0%)；clip-path：inset()inset在clip-path中用于设置裁剪范围，4个参数时对应上、右、下、左的偏移值，这里不限于使用inset可以使用其他裁剪方式，我们得到大概。这样的效果，为伪元素增加循环动画。

看心情随意添加动画关键帧，目的是调整clip-path的范围让伪元素不规律的运动，同时增加了文字的x轴偏移量产生抖动的效果，我们就得到一个真的很随意的效果。接下来使用同样的方法调整动画参数，再设置一个动画关键帧，只要能让两个伪元素交错不规则运动就好。差不多就是这样。

效果有点奇怪。调整了几次参数也没有达到预期的效果。这里只是给大家做个演示，可以按自己的想法做一个更好的文字故障效果。

avaScript 函数防抖

说到防抖，想必多数人首先想到的是相机的防抖。因为我们并不是机器人，所以拿手机拍照的时候，手都会有不易察觉的抖动，这样的抖动会影响相片的质量。手机对这些情况做的一些补偿操作，减小了手抖对成像造成的影响。

我们都知道，JavaScript 是一门编程语言，不是人类也不是机器人。那什么情况下，会产生“抖动”呢？

场景

联想一个平平无奇的登录框，当用户信息输入完毕，点击登录按钮，可能网速有点慢还是啥的，用户等得不耐烦，不停点击，导致鼠标患上帕金森，登录按钮就被一次一次地点击，前端不停地向后台发送重复的请求。

如下面的例子（这里点击一次，执行 console.log('click'), 并且用 console.log('submit') 代指请求）：

可以看到，短时间内连续点击，每次点击都会触发请求.

这种情况，就属于“抖动”。

服务器接收到这样的请求，肯定是一脸懵啊，这谁顶得住？

这个时候，就需要像手机相机一样，做一些操作，减少鼠标抖动对网络请求的影响，减轻服务器的压力。

怎么做

“抖动”情景下，多次点击，导致发送了多次一样的请求。函数防抖的处理方式是：先规定一个时间段，比如一秒，点击按钮，一秒之后再发送请求，假如一秒内又产生了一次点击，那么重新计时，点击过后一秒再发送请求。

这样一来，规定时间段内的快速点击，只会产生一次请求。不管打字多快的手速，也战胜不了防抖的函数。

怎么写

直接上代码：

const debounce = (func, delay = 200) => {
 let timeout = null
 return function () {
 clearTimeout(timeout)
 timeout = setTimeout(() => {
 func.apply(this, arguments)
 }, delay)
 }
}

debounce 函数接受一个函数 func 和一个默认为 200 毫秒延迟时间 delay 作为参数。返回一个函数，触发返回的函数，开始计时，delay 毫秒后触发 func, 假如 delay 时间段内，再次触发这个函数，那么重新计时，delay 毫秒后触发 func.

debounce 首先声明变量 timeout, 用于存放之后 setTimeout 函数返回的定时器编号。

然后返回一个函数，函数内执行 clearTimeout 来依据先前声明的 timeout 来清除定时器。当然，一开始，传入的 timeout 值为 null, 这时的清除操作忽略不计。

接着，执行 setTimeout, 在至少 delay 规定的毫秒后，将 setTimeout 的回调函数添加到当前事件队列，回调内执行 func 函数。并且把返回的定时器编号赋值给 timeout , 这样，下一次触发 debounce 返回的函数时，就可以清除通过上面的 clearTimeout(timeout) 来清除定时器。

注意到上面执行 func 用的是 func.apply(this, arguments), 这样一来，就可以对 debounce 返回的那个函数传递参数，func 执行的时候，再把参数传给 func.

来用一下：

const submit = () => {
 console.log('submit')
}
const debounceSubmit = debounce(submit, 500)
let btnSubmit = document.getElementById('submit')
btnSubmit.addEventListener('click', () => {
 console.log('click')
 debounceSubmit()
})

这里将 submit 函数传入 debounce 函数，并设置延迟时间为 500 毫秒。 debounce 返回的函数赋给 debounceSubmit , 然后在提交按钮 btnSubmit 的点击事件回调中执行 debounceSubmit.

看下效果：

上图中，一开始的几次连续点击，都不会触发 submit ，停止点击后，才触发了一次 submit . 之后两次有一定间隔时间的点击，都触发了 submit.

总结

函数的防抖将一定时间内的多次操作，减少为一次，去除冗余，节约资源。

因

最近公司事情不是太多，我趁着这段时间在网上学习一些Cool~的效果。今天我想和大家分享一个故障时钟的效果。很多时候，一个效果开始看起来很难，但是当你一步步摸索之后，就会发现其实它们只是由一些简单的效果组合而成的。

什么是故障效果(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);  
}  
}

此时的效果如下:

啥啥啥，这看着是什么呀根本不像闪烁效果嘛，先别急，想想我们闪烁效果的定义突然的、不规则的、瞬间的明暗变化,此时因为我们是在切割整体元素，如果我们再后面再重叠一个正常元素！

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);  
    }  
}

可以看到通过手动偏移了-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);  
    }  
}

此时效果如下

可以看到闪烁的效果已经很强烈了,我们依葫芦画瓢再叠加一个元素上去使得故障效果再强烈一些。

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;  
    }  
}

此时我们已经通过:before和:after叠加了相同的元素并且一个设置蓝色一个设置红色，让故障效果更真实！

CSS 实现扭曲效果

上述的效果已经非常贴近我们传统意义上理解的Glitch效果了，但是还差了一点就是通常表现为图像的一部分或整体闪烁、抖动、扭曲、重叠或变形中的扭曲和变形,碰巧的是CSS实现这个效果非常容易，来看看~

skewX() 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个<transform-function>数据类型。

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;  
    }  
}

来看看完整的效果和代码吧！

结语

春风若有怜花意，可否许我再少年。

原文链接：https://juejin.cn/post/7355302255409184807

在线咨询

上一篇：把HTML网页下载为单文件，可离线访问
下一篇：bootstrap教程html文档版，附一个基于bootstrap的后台管理系统

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS教程｜一分钟CSS课堂 ｜ 文字故障动画「一丢丢敷衍版」#CSS