牛B！純 CSS 製做賽博朋克 2077 「故障風」按鈕

（給前端瓶子君加星標）

轉自：CodingStarup

juejin.cn/post/6908565208596217863

你們好，我是 Steven。

雖然我不打機，但我都知道 賽博朋克 2077 這個遊戲，在它的網頁上，有一個 Available Now 的按鈕，當遊標移到它之上的時候，會有一個好像故障的毛刺效果。

這一期，咱們就會模仿而且實現這個效果。

這個教程的視頻版在

https://www.bilibili.com/video/BV15A411s7cX

編寫 HTML 代碼

打開 CodePen 編輯器 ( codepen.io )，在 HTML 的部份加入 <button> 標籤，按鈕的標題是 AVAILABLE NOW。

CSS 的部分

而後到 CSS 的部份，加入 body 標籤，用 Flexbox 的方法將內容設定爲上下左右置中。而後背景顏色，設定爲黃色，加入 button 選擇器，寬度設定爲 380px，而高度設定爲 86px，文字大小設定爲 36px。

而後我想換一種字型，到 Google Font 網站上，選擇了 Bebas Neue 這個字型，將載入字體的代碼貼到 HTML 內，而後將 CSS 字體的設定套用到 button 選擇器內。

好了，將左下角變爲斜角能夠怎樣作呢，一開始我想用 clip-path 去實現，但我想了又想，好像有一種更簡單的方法，就是透過 linear-gradient 設定背景圖片了。設定 background 是 linear-gradient()，角度設定爲 45deg，而後由透明色的 50%，切換爲紅色的 50%，這樣 50% 前的部份就會透明，而 50% 後的部份就是紅色，作到一個顏色分割的效果。

那咱們要將紅色的部份佔大多數，只須要將 50% 改成 5%，就能夠作到左下的斜角了。

而後框線設定爲 0，文字顏色設定爲白色，letter-spacing 字距設定爲 3px，而後我以爲文字的上下有點不對齊，設定 line-height 是 88px，這樣就好一點了。

而後設定右邊的亮藍色邊，將 box-shadow 設定爲 6px 0px 0px #00E6F6，再將 outline 設定爲 transparent，這樣當點擊按鈕的時候，就不會有瀏覽器預設的按鈕邊框了。

如今按鈕的樣式大體上都實現了，那麼怎樣實現當遊標移到它之上的時候，出現的那些毛刺效果呢？咱們先在這個按鈕上，重疊一個如出一轍的按鈕 要實現這一步，我會使用 Pseudo 僞類選擇器。

實現變色層

加入 button::after 選擇器，將 content 設定爲 AVAILABLE NOW，然設 display 設定爲 block，position 設定爲 absolute，當這裏的 position 設定爲 absolute，咱們就回到 button 選擇器裏面，將 position 設定爲 relative，這樣它才能夠根據按鈕去定位，而後上下左右，都設定爲 0，其他樣式都與原來的按鈕相同，因此在 button 選擇器後面，加入逗號，button::after 就能夠了。

這個疊在上面的按鈕，咱們會透過 clip-path()，裁剪其中一些部份出來，而後配合 transform 進行一些位移，再透過 animation 去達到動畫的效果。因此咱們會先在這一層作好變色的效果，首先是左下的斜角，會突顯一些藍色出來，將透明色的比例改成 3%，而後在中間加入一個亮藍色，由 3% 至 5%，而後就是中間的文字，加入 text-shadow 文字陰影，在左邊加入一個黃色，右邊加入一個藍色，大體上就是這樣了。

圖形切割

下一步就是處理圖形分割的部份，加入 clip-path，套用 inset()，裏面的設定值有 4 個，分別表明上右下左，便是要向內縮小多少的意思。先設定爲 80% \-6px 0 0，右邊設定爲 -6px 的緣由是，右邊有一個亮藍色的邊框，因爲它不計算在容器的範圍內，因此要將右邊設定爲負數。

因爲如今是徹底重疊的狀態，切割了也不明顯，加入 transform: translate(-20px, 10px) 稍爲移開一點，就能夠清楚看到正在切割的是哪一個部份了。先將這個切片儲存到 CSS 變數中，名爲 slice-1。

第二個切片的數值是 50% \-6px 30% 0，儲存爲 slice-2。第三個切片的數值是 10% \-6px 85% 0，是上面的部份，儲存爲 slice-3。第四個切片的數值是 40% \-6px 43% 0，都是文字的部份，儲存爲 slice-4。再作多一個切片就行了，第五個的數值是 80% \-6px 5% 0，是下方的部份，儲存爲 slice-5。

再新增一個預設值，50% 50% 50% 50%，儲存爲 slice-0，那咱們這裏 clip-path 的設定值改成 var(--slice-0)，而且將 transform 移除就能夠了。

其實這裏所作的切片的位置和數量是挺隨機的，你們能夠根據想達到的效果自行更改數值。

動畫製做

最後，製做動畫的部份，新增 @keyframes glitch 定義一個動畫名爲 glitch，這裏我分爲 11 個部份，0%，10%，20%，如此類推，一直至到 100%。而後在每個部份都設置 clip-path() 和 transform()，clip-path() 就隨機套用一個切片，而 transform() 就定義一些隨機值，稍爲移動一下就能夠了。

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}
複製代碼

keyframes 的部份設定好了，加入 button:hover::after 選擇器，當遊標移到按鈕之上的時候，觸發動畫，設定 animation，時間是 1 秒，動畫名稱是 glitch。試試看，基本上是能夠了。

不過，這個是故障的效果呢，動畫怎麼會這麼流暢，咱們爲它加一個設定，讓它變得十分卡頓。設定 animation-timing-function 爲 steps(2, end)，數字越小，就越卡頓，你們能夠試試。

咱們來看看這個案例的完成效果

以上，就是要介紹的所有內容。

最後

歡迎關注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

歡迎關注「前端瓶子君」，回覆「 算法 」，加入前端算法源碼編程羣，每日一刷（工做日），每題瓶子君都會很認真的解答喲！

回覆「交流」，吹吹水、聊聊技術、吐吐槽！

回覆「 閱讀 」，每日刷刷高質量好文！

若是這篇文章對你有幫助，「在看」是最大的支持

》》面試官也在看的算法資料《《

「在看和轉發」 就是最大的支持

本文分享自微信公衆號 - 前端瓶子君（pinzi_com）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。