Gradient text animation

本次要分享的是如何利用 CSS 製作出文字的漸層動畫效果

Demo

元素建置

<!-- html -->

    <h1>gradient text</h1>

<!-- css -->

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #000;
}

h1{
    position: absolute;
    top: 50%;
    left: 50%;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 600;
    letter-spacing: 5px;
    transform: translate(-50%,-50%);
}

先建立一個 h1 標籤，並將元素水平垂直至中

文字背景

    background: linear-gradient(90deg,#ff0000,#ffff00,#ff00f3,#0033ff,#ff0000);
    background-size: 300%;

透過 linear-gradient 更改文字的漸層背景，接著將文字背景大小設定為300%

文字剪裁

    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

使用 background-clip: text 的方式，將區塊内的文字作為裁剪範圍向外裁剪，文字的背景就是區塊的背景，文字之外的區域都會被裁剪掉。需要搭配 color:transparent 使用。

動畫效果

animation: animate 5s linear infinite;

@keyframes animate{
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 300%;
    }
}

最後幫文字加上動畫，更改背景的位置，達成漸層移動的效果