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

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

画像に変化を加えるアニメーションは、複数の画像を用意して1コマづつ切り替える方法を用いる場合が多いと思います。
ただ、画像を光らせる程度でしたら、1枚の画像だけで対応出来そうだと思いました。

手順

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

②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%;
  }
}

あとがき

画像や、画像でマスクした要素の中身を工夫すれば、楽しげなアニメーションを色々と作成出来そうです。
以上です。最後までお読み下さりありがとうございました。

また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です！ デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。