CSS animation で遊び倒す　- 太陽 -

CSS animation day11 となりました。

だいぶ、自然系ネタが尽きてきました。本日は、おしゃれな太陽を表現します。

#1. 完成版

![ダウンロード (23).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/a2e1d35d-8323-453d-0540-0b97d95ea25b.gif)

<p class="codepen" data-height="684" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="KJaVmQ" style="height: 684px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="shining sun">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/KJaVmQ/">
  shining sun</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. 参考文献
[Drop shadow be a Gradient - CSS Animated Gradient Shadow Effects - Quick HTML, CSS Tips & Tricks - YouTube](https://www.youtube.com/watch?v=1EAtn4B-76g)


#3. 分解してみる

❶. 

では背景から作りましょう。

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

```styles.css
body {
  margin: 0;
  padding: 0;
  background: #000;
}

.shadow {
  position: relative;
  margin: 200px auto 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: linear-gradient(#000, #262626);
}
```

<img width="1114" alt="スクリーンショット 2019-01-31 9.07.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/fa883392-a30b-64aa-e104-84c2a520725a.png">

❷.
では、次に虹色を表現します。

```styles.css
.shadow:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  background: linear-gradient(orange, yellow, green, cyan, blue, violet);
  width: 100%;
  height: 100%;
  background-size: 100%;
```
<img width="754" alt="スクリーンショット 2019-01-31 9.24.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/84690665-2095-aef2-8e82-501233737260.png">

この虹色を影にするために背面に持ってくるためには、z-index: -1 とすれば良いですが、完全に裏になると、虹色がグラディエントが前面の黒に重なり、見えなくなります。
top, left をいじってみましょう。


```styles.css
.shadow:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 50%;
  background: linear-gradient(orange, yellow, green, cyan, blue, violet);
  width: 100%;
  height: 100%;
  background-size: 100%;
  z-index: -1;
}
```

<img width="608" alt="スクリーンショット 2019-01-31 9.27.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/0f71d1ac-9be7-406c-7da0-04e59012323d.png">

いい感じになりました。
全周に影をつけるために、width, height を変更しましょう。

```styles.css
.shadow:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 50%;
  background: linear-gradient(orange, yellow, green, cyan, blue, violet);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-size: 100%;
  z-index: -1;
}
```
<img width="819" alt="スクリーンショット 2019-01-31 9.30.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/3f6b2984-d5f9-2fe2-6523-ac60ecd8e677.png">

ポイントは、一つ
`calc()` 
これは、レスポンシブデザイン対応のため、異なる単位(%, px)で計算したいときに、役立つ便利なメソッドです。
詳細は [こちら](https://coliss.com/articles/build-websites/operation/css/calc-function-with-use-cases.html) の記事をご参照ください。
<br/>
❸.
アニメーションを設定する。

アニメーションで、X座標を動かして、輪郭に虹色の変化をだしたいとします。
ただ今のままでは、グラデーションは横に同じ色が重なっているため、X軸への平行移動では、色の変化は出ません。そこで、虹色のグラデーションの先頭に任意の角度 (ここでは45度)をつけて、色の変化を明瞭に出しましょう。


```styles.css
.shadow:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, orange, yellow, green, cyan, blue, violet);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-size: 400%;
  animation: shadow 20s linear infinite;
}

@keyframes shadow {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
```
![ダウンロード (21).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f2d8231c-9452-0001-a747-eea0d1a5f374.gif)


z index: -1 にして

![ダウンロード (22).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3f594fbf-c6a3-dc73-d25a-cab8202e78c0.gif)

かなり出来上がってきました。
では、最後、さらに表現力をあげます。
<br/>
❹.
blur をつけよう！

```styles.css
body {
  margin: 0;
  padding: 0;
  background: #000;
}

.shadow {
  position: relative;
  margin: 200px auto 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: linear-gradient(#000, #262626);
}

.shadow:before,
.shadow:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 50%;
  background: linear-gradient(45deg, orange, yellow, green, cyan, blue, violet);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-size: 400%;
  z-index: -1;
  animation: shadow 20s linear infinite;
}

.shadow:after {
  filter: blur(20px);
}

@keyframes shadow {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;
  }
  100% {
    background-position: 0 0;
  }
}
```

![ダウンロード (23).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/32cccd46-22f5-8311-e467-c967d59ab404.gif)


after擬似クラスで、blurをつけました。
[filterプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/filter) は超優秀で、blur以外にも、明るくしたり、コントラストをつけたりすることができます。


```styles.css 
.shadow:after {
  filter: blur(20px) drop-shadow(16px 16px 16px red) invert(200%);
}

```

![ダウンロード (24).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f4cff693-1748-2746-c52c-32526452d3ec.gif)


こんな素敵な表現が、CSSだけでできるなんて、素敵ですね。
ではまた明日〜!