當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

抖音抖一抖-SVG和CSS视觉故障艺术小赏

發布時間：2023/12/20 CSS 51 豆豆

生活随笔收集整理的這篇文章主要介紹了抖音抖一抖-SVG和CSS视觉故障艺术小赏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

故障藝術，英文名稱叫glitch，在很多賽博朋克作品中經常看到，其實就是故意表現一種顯示設備的小故障效果，抖音的圖標其實就是這種的效果，我們看下這個圖標

這個圖標中的紅色和藍色的偏移其實就是一種故障藝術，看到這個，我就能想到早年我家還沒有有線電視時，搖天線對電視信號的場景，信號一差就是對著電視一陣拳打腳踢，現在看到這種藝術效果頗為懷念。

某甲：為啥我沒遇到過這種場景？

我：你把手里的平板扔地上就能看到了。

某甲：（土豪動作完成）我摔了，咋還沒看到呢

我：我就打個比方，你何必當真...

某甲：我一定要看到！

我：要不你再跺幾腳...

----------------------------------------我是打算開始的分割線------------------------------------------

我們先來實現一個動態的抖音故障效果，首先我們要有一個干凈的抖音圖標，我是從阿里巴巴矢量圖標庫找的，因為它家支持SVG格式，得到的SVG代碼是這樣的。

看到的圖形是這樣子的

注意，在SVG的代碼里面是沒有設置顏色的，圖片里面的黑色是為了讓大家看清楚。我們先把白色，藍色和紅色的三層抖音圖標先顯示出來，代碼如下：

<use xlink:href="#douyin" x="0%" y="10%" class="douyin1" /> <use xlink:href="#douyin" x="0%" y="10%" class="douyin2" /> <use xlink:href="#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效果，具體的分工如下：

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

源代碼請看這里

總結

以上是生活随笔為你收集整理的抖音抖一抖-SVG和CSS视觉故障艺术小赏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java程序设计课程培训心得体会_Jav
下一篇：弹窗拦截小帮手------火绒