故障藝術，英文名稱叫glitch，在很多賽博朋克作品中經常看到，其實就是故意表現一種顯示設備的小故障效果，抖音的圖示其實就是這種的效果，我們看下這個圖示
這個圖示中的紅色和藍色的偏移其實就是一種故障藝術，看到這個，我就能想到早年我家還沒有有線電視時，搖天線對電視信號的場景，信號一差就是對著電視一陣拳打腳踢，現在看到這種藝術效果頗為懷念，
某甲：為啥我沒遇到過這種場景？
我：你把手里的平板扔地上就能看到了，
某甲：（土豪動作完成）我摔了，咋還沒看到呢
我：我就打個比方，你何必當真...
某甲：我一定要看到！
我：要不你再跺幾腳...
----------------------------------------我是打算開始的分割線------------------------------------------
我們先來實作一個動態的抖音故障效果，首先我們要有一個干凈的抖音圖示，我是從阿里巴巴矢量圖示庫找的，因為它家支持SVG格式，得到的SVG代碼是這樣的，
<svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128"> <path d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28" p-id="2917"></path> </svg>看到的圖形是這樣子的
注意，在SVG的代碼里面是沒有設定顏色的，圖片里面的黑色是為了讓大家看清楚，我們先把白色，藍色和紅色的三層抖音圖示先顯示出來，代碼如下：
<use xlink:href=https://www.cnblogs.com/wphmoon/p/"#douyin" x="0%" y="10%" class="douyin1" /><use xlink:href=https://www.cnblogs.com/wphmoon/p/"#douyin" x="0%" y="10%" class="douyin2" /><use xlink:href=https://www.cnblogs.com/wphmoon/p/"#douyin" x="0%" y="10%" class="douyin" />/* 白色 */.douyin { fill: #fff; }/* 藍色 */ .douyin1 { fill: #25f4ee; }/* 紅色 */ .douyin2 { fill: #fe2c55; }分別填上了白色，紅色和藍色，在SVG里面，后面的會覆寫前面的，所以把白色放在最前面，因為現在三者的位置是重疊的，所以只能看到白色的，
我們再設定白色的影片效果
@keyframes glitch1 { 0% { transform: none; opacity: 1; } 7% { transform: skew(-2.5deg, -0.9deg); opacity: 0.75; } 10% { transform: none; opacity: 1; } 27% { transform: none; opacity: 1; } 30% { transform: skew(1.8deg, -0.1deg); opacity: 0.75; } 35% { transform: none; opacity: 1; } 52% { transform: none; opacity: 1; } 55% { transform: skew(-1deg, 1.2deg); opacity: 0.75; } 60% { transform: none; opacity: 1; } 72% { transform: none; opacity: 1; } 75% { transform: skew(0.4deg, -1deg); opacity: 0.75; } 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }白色的影片效果很小，因為我只做了一些輕微的傾斜效果，感徑訓面在抖動，用的是 transform: skew(），transform是css的一個屬性，主要設定的是變形效果，這邊用的skew是實作傾斜效果，另外還用opacity做了些透明度的處理，用來表現信號故障時的亮度變化，
我們接著設定藍色圖示的影片效果：
@keyframes glitch2 { 0% { transform: none; opacity: 0.25; } 7% { transform: translate(-4px, -6px); opacity: 0.5; } 10% { transform: none; opacity: 0.25; } 27% { transform: none; opacity: 0.25; } 30% { transform: translate(-7px, -4px); opacity: 0.5; } 35% { transform: none; opacity: 0.25; } 52% { transform: none; opacity: 0.25; } 55% { transform: translate(-5px, -2px); opacity: 0.5; } 60% { transform: none; opacity: 0.25; } 72% { transform: none; opacity: 0.25; } 75% { transform: translate(-4px, -6px); opacity: 0.5; } 80% { transform: none; opacity: 0.25; } 100% { transform: none; opacity: 0.25; } }這里同樣是使用transform變形，但用的效果是translate，官方的名稱是2D轉換，其實就是平移效果，可以在橫向縱向做移動，我們看抖音的圖示就知道，藍色部分是在白色圖示的左上方，所以設定的translate的值都是負數，這是左上方的平移，
紅色部分類似，只是translate的值都是正數，表示時右下方的平移，代碼如下：
@keyframes glitch3 { 0% { transform: none; opacity: 0.25; } 7% { transform: translate(4px, 6px); opacity: 0.5; } 10% { transform: none; opacity: 0.25; } 27% { transform: none; opacity: 0.25; } 30% { transform: translate(7px, 4px); opacity: 0.5; } 35% { transform: none; opacity: 0.25; } 52% { transform: none; opacity: 0.25; } 55% { transform: translate(5px, 2px); opacity: 0.5; } 60% { transform: none; opacity: 0.25; } 72% { transform: none; opacity: 0.25; } 75% { transform: translate(4px, 8px); opacity: 0.5; } 80% { transform: none; opacity: 0.25; } 100% { transform: none; opacity: 0.25; } }最后，把影片效果加到css類里面去，之前的css代碼改成這樣
.douyin { fill: #fff; /*Animation*/ animation: glitch1 3s infinite; } .douyin1 { fill: #25f4ee; animation: glitch2 3s infinite; } .douyin2 { fill: #fe2c55; animation: glitch3 3s infinite; }影片效果設定成3秒，無限回圈，最后的成品效果如下：
在線效果請移步codepen.io
---------------------------------------------還有高級效果的分割線----------------------------------------
上面實作的是模仿抖音官方圖示的動態效果，但作為一個賽博朋克藝術家（是的，我都藝術家好幾個星期了），我覺得這個效果雖然很符合抖音的氣質，但離我想象中的高大上效果還有很大一段距離，我決定再加些效果，更加賽博朋克一些，
這里我要用上一個負責的svg的filter，代碼如下：
<filter id="filter"> <feTurbulence type="turbulence" baseFrequency="0.01 0.15" numOctaves="2" seed="5" stitchTiles="stitch" result="turbulence" /> <feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix" /> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 150 -15" in="colormatrix" result="colormatrix1" /> <feDisplacementMap in="SourceGraphic" in2="colormatrix1" scale="10" xChannelSelector="R" yChannelSelector="A" result="displacementMap" /> </filter>這是一個組合的filter效果，具體的分工如下：
- feTurbulence是利用Perlin噪聲函式創建了一個影像，它實作了人造紋理比如說云紋、大理石紋的合成，我之前做云朵的時候用的就是它，這里主要實作干擾信號的效果
- feColorMatrix 基于轉換矩陣對顏色進行變換，在這里可以把白、藍、紅的顏色混合，在三種顏色疊加的地方產生一種顏色互相干擾的效果
- feDisplacementMap 實際上是一個位置替換濾鏡，就是改變元素和圖形的像素位置的，在這里，針對抖音的圖示（SourceGraphic）和經過feColorMatrix /feTurbulence過濾器后的結果做位置變換，就等到了干擾效果的最終結果，
最后我們把這個filter加到影片效果里面，我們拿三個keyframe中的一個來看下代碼，其他兩個是一樣的，
@keyframes glitch1 { 0% { transform: none; opacity: 1; } 7% { transform: skew(-2.5deg, -0.9deg); filter: url(#filter); opacity: 0.75; } 8% { filter: none; } 10% { transform: none; opacity: 1; } 27% { transform: none; opacity: 1; } 30% { transform: skew(1.8deg, -0.1deg); filter: url(#filter); opacity: 0.75; } 31% { filter: none; } 35% { transform: none; opacity: 1; } 52% { transform: none; opacity: 1; } 55% { transform: skew(-1deg, 1.2deg); filter: url(#filter); opacity: 0.75; } 56% { filter: none; } 60% { transform: none; opacity: 1; } 72% { transform: none; opacity: 1; } 75% { transform: skew(0.4deg, -1deg); filter: url(#filter); opacity: 0.75; } 76% { filter: none; } 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }filter: url(#filter) 這一句就是呼叫svg filter的陳述句，注意每呼叫一次這個，在后面都會加上這一句
31% { filter: none; }這是為了讓filter效果瞬間出現，瞬間消失，使得故障效果更加逼真，最終看到的效果如下：
在線效果請看codepen.io
源代碼請看這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/36714.html
標籤：HTML5
上一篇：萌新請教關于vue的問題，如何將A頁面接收到的實時資料，每秒都來的資料，實時渲染到B和C頁面，我該使用什么技術解決比較好，求指點，謝謝