Cyberpunk 風格按鈕動畫

本次實作的是之前風靡全球的影集 Cyberpunk edgerunners 其中出現的閃爍特效

Demo

元素建置


<!-- html -->

<div class="btn">AVAILABLE NOW</div>

<!-- css -->

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    height: 100vh;
    background-color: yellow;
}

.btn{
    cursor: pointer;
    width: 380px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 28px;
    background: #ff013c;
    color: white;
}

首先我們建立一個 Div 元素，並設定基本的外觀

屬性調整


.btn{
    cursor: pointer;
    width: 380px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 28px;
    color: white;
    background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
    box-shadow: 6px 0 0 #00e6f6;
}

接著再調整一些屬性，讓圖案更接近原本的按鈕，為了達成圖案左下方的缺角，我們使用 linear-gradient 的方式設定背景顏色，設定角度從 45 deg ，前 5% 的位置設定透明，後方的顏色設定為紅色，將顏色位置重疊，便能呈現兩種顏色的交界，而元素的後方藍色區域，則是使用 box-shadow X軸偏移 6px Y軸、陰影設定為0 顏色設定天藍色，便能達成效果

偽元素


.btn::after {
    content: "AVAILABLE NOW";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg,
            transparent 3%,
            #00e6f6 3%,
            #00e6f6 5%,
            #ff013c 5%);
    text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
}

為了達成閃爍效果，我們先建立一個偽元素，接著套用原本的 btn 類別，再添調整偽元素的 background、text-shadow，以下是兩個元素的差別

偽元素裁剪

.btn::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 20% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(50% -6px 40% 0);
    --slice-5: inset(80% -6px 4% 0);
    content: "AVAILABLE NOW";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg,
            transparent 3%,
            #00e6f6 3%,
            #00e6f6 5%,
            #ff013c 5%);
    text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
    clip-path: var(--slice-0);

}

在實際的動畫效果，我們將偽元素使用 clip-path 的方式切割，再搭配關鍵影格 (@keyframes) 做出想要的動畫效果，為此我們先將元素裁剪，並將其宣告為變數，使用 inset 的方式能夠裁剪元素內部，inset 內的值可設定 ( 上下左右 ) 、( 上右下左 ) 兩種，這邊我們裁剪了5個樣式，可以依照自己想要呈現的效果再進行修改。

動畫效果


.btn:hover::after {
    animation: glitch 1s;
    animation-timing-function: steps(1);
}


@keyframes glitch {
    0% {
        clip-path: var(--slice-0);
        transform: translate(-20px, -10px);
    }

    10% {
        clip-path: var(--slice-3);
        transform: translate(30px, 10px);
    }

    20% {
        clip-path: var(--slice-1);
        transform: translate(-30px, -10px);
    }

    30% {
        clip-path: var(--slice-4);
        transform: translate(10px, 10px);
    }

    40% {
        clip-path: var(--slice-2);
        transform: translate(-10px, -10px);
    }

    50% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }

    60% {
        clip-path: var(--slice-2);
        transform: translate(-20px, 10px);
    }

    70% {
        clip-path: var(--slice-4);
        transform: translate(-10px, -10px);
    }

    80% {
        clip-path: var(--slice-3);
        transform: translate(-20px, 10px);
    }

    90% {
        clip-path: var(--slice-5);
        transform: translate(-20px, -10px);
    }

    100% {
        clip-path: var(--slice-0);
        transform: translate(-20px, 10px);
    }
}

將偽元素加上 :hover，表示滑鼠移動到上方時會執行動畫效果，動畫持續時間設定為1秒，為了有感覺故障的效果我們將動畫加上 animation-timing-function 屬性，設定動畫播放速度曲線為 steps 表示逐格動畫，一步步進行，動畫時點分為10個百分比，每個百分比修改他的 clip-path(裁剪)、transform: translate(位移)屬性。

.btn:hover {
    animation: glitchBtn 1s;
    animation-timing-function: steps(1);
}

@keyframes glitchBtn {
    0% {
      transform: translate(-20px, -10px);
    }
    10% {
      transform: translate(20px, 10px);
    }
    20% {
      transform: translate(-20px, -10px);
    }
    30% {
      transform: translate(10px, 10px);
    }
    40% {
      transform: translate(-10px, -10px);
    }
    50% {
      transform: translate(20px, -10px);
    }
    60% {
      transform: translate(-20px, 10px);
    }
    70% {
      transform: translate(-10px, -10px);
    }
    80% {
      transform: translate(-20px, 10px);
    }
    90% {
      transform: translate(-20px, -10px);
    }
    100% {
      transform: translate(-20px, 10px);
    }
  }

btn 也加上類似的動畫效果，差別在於此處不需要裁剪，因此只需要調整左右位移，就大功告成了，最後也可以依照自己想要的效果再進行修改，也能加上自己喜歡的字體。