文字（打ち込み）をキラリと光らせる（HTML、CSS）

まえがき

前回は、画像の文字を光らせる方法を記載しましたが、今回は打ち込み文字を光らせる方法を記載します。

文字をキラリと光らせる

手順

background-clip を利用して、background-color で文字の色を、background-image で光の色を指定して、アニメーションさせています。

①背景で光を作成

②文字を打ち込む

③背景を移動、変化させる

④背景を文字でマスクする

コード

HTML

<div class="demo-box">
  <div class="demo-text">IMG-FLOW</div>
</div>

CSS

.demo-box{
  display: flex;
  justify-content: center;
  background-color: #000;
}
.demo-text{
  color: transparent;
  background-color: #306bb1;
  background-image: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
  background-repeat: no-repeat;
  background-size: 0em 0em;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  animation-name: demo_kirari;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  padding: 10px;
}
@keyframes demo_kirari{
  0% {
    background-size: 0em 0em;
    background-position: 0% 50%;
  }
  50% {
    background-size: 2em 2em;
  }
  100% {
    background-size: 0em 0em;
    background-position: 100% 50%;
  }
}

あとがき

backgroundプロパティの使い方次第で、面白いアニメーションを作成出来そうです
以上です。最後までお読み下さりありがとうございました。

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