CSS animation で遊び倒す - Conic Gradient Loader -

CSS animation day 55 となりました。
本日は、conic-gradient を使ったアニメーションを作成します。


#1. 完成版

<p class="codepen" data-height="506" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="PLaPgb" style="height: 506px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Conic Glowing Loader">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/PLaPgb/">
  Conic Glowing Loader</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. 参考文献
[1 element rainbow spinner 2017](https://codepen.io/thebabydino/pen/YNjrRo)
[CSS animation で遊び倒す - Glowing Loading -](https://qiita.com/duka/items/b8e65b0278e0191e40e1)

#3. 分解してみる

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

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="image">
        <div class="text">Loading...</div>
      </div>
    </div>
  </body>
</html>
```


```styles.scss
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle, #333, #111);
}

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

.image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #333;
}

.text {
  color: #fffccc;
  text-align: center;
  line-height: 300px;
  font-size: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
```

![スクリーンショット 2019-03-18 7.14.46.png](https://qiita-image-store.s3.amazonaws.com/0/232715/2b426511-a1a1-7da8-24e9-ea502fb150c5.png)

細かいことですが
body のbackgroundに、radial-gradient を設定すると面白いです。
中心から放射状に同心円を作ることができ、内側を明るく、外側を暗くできます。
表現物が光を発する時に、この効果を使えば、明かりで照らされている様を表現することができます。
<br/>
❷.
では、conic-gradient を使いましょう。
イメージとしては、前回の[記事](https://qiita.com/duka/items/b8e65b0278e0191e40e1)のように、before クラスと、calc メソッドを使います。

```styles.scss
.image {
  position: relative;　　//追加
}


.image:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(orange, yellow, green, cyan, blue, violet, orange);
  width: calc(100% + 8px);
  height: calc(100% + 8px);
}
```

![スクリーンショット 2019-03-18 7.41.41.png](https://qiita-image-store.s3.amazonaws.com/0/232715/80a4643a-e4dc-30f3-7e23-ada4ffdad448.png)

いい感じです。
z-index を外すとこうなってます。

![スクリーンショット 2019-03-18 8.39.02.png](https://qiita-image-store.s3.amazonaws.com/0/232715/5a66fddb-a41f-e800-4b19-89079ec95467.png)

円周のグラデーションは、この conic- gradient が最適ですね。
<br/>
❸.
では、アニメーションとblurテクニックを使いましょう。
また、せっかくなので、img クラスのbackground に、conic-gradient を使いましょう。

```styles.scss
.img{
      　　・・・
  background: conic-gradient(#333,#222, #111, #222, #333);
}

.image:before,
.image:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(orange, yellow, green, cyan, blue, violet, orange);
  animation: round 2s linear infinite;
}

.image:before {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);

}

.image:after {
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  filter: blur(10px);
}

@keyframes round {
  100% {
    transform: rotate(360deg);
  }
}
```
<p class="codepen" data-height="506" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="PLaPgb" style="height: 506px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Conic Glowing Loader">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/PLaPgb/">
  Conic Glowing Loader</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>

完成しました。
conic-gradient を使えば、簡単にこういう円周のグラデーションができますね。それでは、また明日〜