【CSSだけ】テキストで背景を切り抜き背景をアニメーションさせる

2023年1月13日

テキストの背景をアニメーションする方法をご紹介します。ローディングやテキストのアクセントに使えるデザインだと思うので、コピペして使ってみてください。

【CSSだけ】テキストで背景を切り抜き背景をアニメーションさせる

最初に全てのコードをお見せして、後から細かく説明しますので、コードだけ知りたい方はコピーしてすぐに使ってみてください！

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【CSSだけ】テキストで背景を切り抜き背景をアニメーションさせる</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="text-container">
        <h1>HELLO</h1>
    </div>
</body>
</html>

CSS↓

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: arial;
    height: 100vh;
    background: #000000;
}
.text-container{
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.text-container h1{
    width: 100%;
    background: url(color.jpg);
    background-size: cover;
    font-size: 150px;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    animation: animate 5s linear infinite;
}
@keyframes animate{
    0%{
        background-position: left 0px top 0px;
    }
    100%{
        background-position: left 1000px top 0px;
    }
}

@media screen and (max-width:600px){
    .text-container{
        max-width: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .text-container h1{
        font-size: 90px;
    }
}

CSSの解説

その1　背景画像をテキストで切り抜く

.text-container h1{
    width: 100%;
    background: url(color.jpg);
    background-size: cover;
    font-size: 150px;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    animation: animate 5s linear infinite;
}

過去にも紹介したことがある背景画像をテキストに切り抜く技術を説明します。使うCSSは３つ。

background: url(color.jpg);

-webkit-background-clip: text;

-webkit-text-fill-color:transparent;

です。この３つは切り抜きたいテキストの要素に書きます（DEMOの場合は<h1>タグ）。-webkit-background-clip: text;で背景画像をテキストで切り抜きます。次に-webkit-text-fill-color:transparent;でテキストの元々の色を透明にして背景を可視化させます。

過去の参考記事

【webデザイン】HTMLとCSSで作る404エラーページデザイン

その2　background-repeatさせる

背景を動かすためにはbackground-repeat:をあえて設定しないことです。細かくいうと、repeat-xは良いですが、no-repeatに設定しないことです。そうすることでanimationで動かしても背景が消えることなく表示続けます。

その3　animationで背景の位置を調節する

@keyframes animate{
    0%{
        background-position: left 0px top 0px;
    }
    100%{
        background-position: left 1000px top 0px;
    }
}

今回の1番のポイントはanimationで背景画像のleftの位置を変える設定をすることです。@keyframesにアニメーションを設定しますが、background-position:を0%と100%つまり最初と最後の位置を指定しています。今回は最初の位置を一番左に、最後の位置を左から右に1000pxのところまで動かす、という設定にしています。これをanimation: animate 5s linear infinite;で5秒間一定の速さでループするようにしています。