CSS animation day 44 となりました。
本日も、Loading を作っていきます。

1. 完成版

See the Pen Loading interaction by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

Glowing text effect with pure CSS3

3. 分解してみる

❶.
マークアップしましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="glowing">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
  </body>
</html>

styles.scss

body {
  margin: 0;
  padding: 0;
  background: #000;
}

.glowing {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  color: #fffccc;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #fff000;
}

注意点として
span はインライン要素なので、width とheight は単体ではつけることはできません。
そんな時は、display: inline-block にしてあげましょう。
詳しくは、サルワカの記事に大変わかりやすくのっております。

❷.
アニメーションを作ります。
box-shadow, inset で箱の中に色をつけ、文字の色と太さを変化させます。

styles.scss

span {
  color: #fffccc;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #fff000;
  animation: glowing 1s linear infinite;
}

@keyframes glowing {
  100% {
    color: #000;
    font-weight: bold;
    box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset;
  }
}

いい感じです！

❸.
擬似要素とループ文を使い、各々に、animation-delay を設定しましょう。

styles.scss


span {
  color: #fffccc;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #fff000;
  animation: glowing 1.5s ease-in-out infinite;

  @for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      animation-delay: 0.1 * $i + s;
    }
  }
}

@keyframes glowing {
  50% {
    color: #000;
    font-weight: bold;
    box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset;
  }
}

完成しました！
本日の作品は、割とシンプルめなコードでした。
他にも色々表現方法はある(blur やborder、scale、transdorm を変えるなど)ので、
いじってみてください。それでは、また明日〜