故障藝術，英文名稱叫glitch，在很多賽博朋克作品中經常看到，其實就是故意表現一種顯示裝置的小故障效果，抖音的圖示其實就是這種的效果，我們看下這個圖示
這個圖示中的紅色和藍色的偏移其實就是一種故障藝術，看到這個，我就能想到早年我家還沒有有線電視時，搖天線對電視訊號的場景，訊號一差就是對著電視一陣拳打腳踢，現在看到這種藝術效果頗為懷念。
某甲：為啥我沒遇到過這種場景？
我：你把手裡的平板扔地上就能看到了。
某甲：（土豪動作完成）我摔了，咋還沒看到呢
我：我就打個比方，你何必當真...
某甲：我一定要看到！
我：要不你再跺幾腳...
----------------------------------------我是打算開始的分割線------------------------------------------
我們先來實現乙個動態的抖音故障效果，首先我們要有乙個乾淨的抖音圖示，我是從阿里巴巴向量圖示庫找的，因為它家支援svg格式，得到的svg**是這樣的。
/* 白色 */
.douyin
/* 藍色 */
.douyin1
/* 紅色 */
.douyin2
我們再設定白色的動畫效果
@keyframes glitch1
7% 10%
27%
30%
35%
52%
55%
60%
72%
75%
80%
100%
}
我們接著設定藍色圖示的動畫效果：
@keyframes glitch2
7% 10%
27%
30%
35%
52%
55%
60%
72%
75%
80%
100%
}
紅色部分類似，只是translate的值都是正數，表示時右下方的平移。**如下：
@keyframes glitch3
7% 10%
27%
30%
35%
52%
55%
60%
72%
75%
80%
100%
}
.douyin
.douyin1
.douyin2
---------------------------------------------還有高階效果的分割線----------------------------------------
上面實現的是模仿抖音官方圖示的動態效果，但作為乙個賽博朋克藝術家（是的，我都藝術家好幾個星期了），我覺得這個效果雖然很符合抖音的氣質，但離我想象中的高大上效果還有很大一段距離，我決定再加些效果，更加賽博朋克一些。
result="turbulence" />
0 1 0 0 0
0 0 1 0 0
0 0 0 150 -15" in="colormatrix" result="colormatrix1">
result="displacementmap" />
filter>
最後我們把這個filter加到動畫效果裡面，我們拿三個keyframe中的乙個來看下**，其他兩個是一樣的。
@keyframes glitch1
7% 8%
10%
27%
30%
31%
35%
52%
55%
56%
60%
72%
75%
76%
80%
100%
}
31%
源**請看這裡
抖音上很火的手機遊戲有哪些 抖音遊戲大全一覽
1 36 種死法 顧名思義，這是由 36 個虐程式設計客棧心 魔性的火柴人遊戲組成的遊戲合集。遊戲以令人髮指的難度狂虐玩家，每一種死法都讓能讓你死去活來又欲罷不能。遊戲位址 2 點點衝刺 輕按可跳躍或改變方向 別偏離跑道 解鎖新角色 只需要打通 1000 關。這不過是小菜一碟，對吧?一定要拉朋友一起...
抖音電商啟動「抖音55潮購季」 投入億級流量和補貼
程式設計客棧 www.cppcns.com 4月www.cppcns.com30日 訊息 抖音電商今日宣布啟動 抖音55潮購季 投入億級流量和補貼進行優惠大促，活動將持續10天，至5月9日結束。據了解，抖音55潮購季 活動整合商家 達人 機構和服務商等多方力量，為消費者帶來潮流消費新體驗，並為商家打...
函式防抖和節流（一） 防抖函式
一.什麼是函式防抖？1 概念 函式防抖 debounce 就是指觸發事件後，在延遲時間內函式只能執行一次，如果觸發事件後在延遲時間內又觸發了事件，則會重新計算函式延執行時間。等延遲時間計時完畢，則執行目標 2 例如 坐電梯的時候，如果電梯檢測到有人進來 觸發事件 就會多等待 10 秒，此時如果又有人...