CSS animation で遊び倒す - Glowing Loading 3  -

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


#1. 完成版

![ダウンロード (47).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/5ac9abca-5866-a85f-2a30-3b37fad847f2.gif)


<p class="codepen" data-height="348" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="eXgoLp" style="height: 348px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Loading interaction">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/eXgoLp/">
  Loading interaction</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. 参考文献
[Glowing text effect with pure CSS3](https://www.youtube.com/watch?v=2e0ZZINYq_0)

#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;
}
```

![スクリーンショット 2019-03-07 8.10.00.png](https://qiita-image-store.s3.amazonaws.com/0/232715/ddc5fbb6-93b4-f258-d778-3ff245aa33b8.png)


注意点として
span はインライン要素なので、width とheight は単体ではつけることはできません。
そんな時は、display: inline-block にしてあげましょう。
詳しくは、[サルワカ](https://saruwakakun.com/html-css/basic/display) の記事に大変わかりやすくのっております。
<br/>
❷.
アニメーションを作ります。
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;
  }
}
```

![ダウンロード (46).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/9faf034d-5ee8-e82f-81fc-964cbf92f9d0.gif)

いい感じです！
<br/>
❸.
擬似要素とループ文を使い、各々に、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;
  }
}
```
![ダウンロード (47).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/6baa4c83-8466-c771-67cf-6289cedc6431.gif)


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