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








你可能感興趣的文章

D59_W7

D59_W7

[Week 3] 使用 npm 套件管理系統

[Week 3] 使用 npm 套件管理系統

Day 79

Day 79






留言討論