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