画像の文字をキラリと光らせる（HTML、CSS）

この記事は2022年9月に公開しました。
内容が今と違う場合があります。

文字の入った画像を、キラリと光らせる。
HTML と CSS だけで、画像1枚からできます。
この記事では、その手順とコードを紹介します。

画像の文字をキラリと光らせる
手順
コード
あとがき

画像の文字をキラリと光らせる

画像の見た目を変えるアニメーションは、複数の画像を1コマずつ切り替えて作ることが多いです。
ただ、光らせる程度なら、1枚の画像で足ります。

手順

手順ごとの見え方を、画像で並べます。
④と⑤は光が動くので、画像はその途中の1場面です。
動きは、デモページで確かめられます。

デモページで動きを見る

①画像を準備（背景が透過している画像）

黒い背景の上に、背景が透過した「Happy Birthday」の文字の画像を置いた状態

②cssで光を作成

黒い背景の上に、CSS で作った白くぼやけた斜めの光だけを出した状態（画像は透明にしている）

③光を画像でマスクする

④光を移動させる

⑤画像の上に、画像でマスクした光を配置する

コード

⑤の形のコードです。

HTML

<div class="demo-ttl">
  <div class="demo-inner">
    <img src="画像.svg" alt="画像" />
    <div class="demo-mask">
      <div class="demo-hikari"></div>
    </div>
  </div>
</div>

CSS

.demo-ttl{
  background-color: #000;
  padding: 15px;
}
.demo-inner{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.demo-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url('画像.svg'); mask-image: url('画像.svg');
  -webkit-mask-size: 100% auto; mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left top; mask-position: left top;
}
.demo-hikari{
  position: absolute;
  top: -2%;
  left: -60%;
  width: 60%;
  padding: 60% 0 0;
  background-image: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
  transform: skewX(30deg);
  animation-name: demo_kirari;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes demo_kirari{
  100%{
    left: 100%;
  }
}