【完走賞ゲットだぜ！】CSSでハイパーボールを作る！

## はじめに
みなさん初めまして。🎅🏻

Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。

今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 **全員** に完走賞がおくられる企画を開催しています。🎉 🎉 

Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。

この記事は、そのカレンダーの4記事目です。

4記事目は、 「**【完走賞ゲットだぜ！】CSSでハイパーボールを作る！**」です。

ポケモントレーナーに必要なものの1つは、**ハイパーボール**ですよね。(間違えない。)
ハイパーボールは、スーパーボールよりもさらに捕獲補正率が高まるボールです。
ほとんどのトレーナーは、ストーリー上ではハイパーボールを一番使っているのではないでしょうか？

そのため、この記事では、CSSで作るハイパーボールを紹介しようと思います。


## 完成形
完成形は**↓こちら**です。
影やアニメーションを用いて、球体を表現しています。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBKqEJZ" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/qBKqEJZ">
  ハイパーボール 3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 作成手順
では、早速作って行きましょう！

### 01. ハイパーボールの外形を作る
まずは、↓このようなハイパーボールの外形を作って行きましょう！
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9c5d46b6-abd7-63ea-2c13-853a8fe29695.png)

この外形を作るために `linear-gradient` を使って作っていきます。

`linear-gradient`を以下のように記載することで、上から順に
**0% ~ 46% ： #1a1a1a**
**46% ~ 54% ： Black**
**54% ~ 100% ： White**
と塗り分けることができます。

```sample.css
div {
  background:linear-gradient(#1a1a1a 46%, black 46%, black 54%, white 54%);
}
```

この `linear-gradient` を使い以下のように記載するとハイパーボールの外形を作ることができます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="OJEbGRW" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/OJEbGRW">
  ハイパーボール 3d - 1</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 02. ハイパーボールの内部を作る
次に、↓このようなハイパーボールの内部を作っていきましょう！
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/730bf7de-67fc-62ab-f5da-e320e8c9fbef.png)

[モンスターボールの記事](https://qiita.com/degudegu2510/private/f6bcc46a1a620a7c3e45)と同様にボタン部分作成します。

また、ハイパーボールの黄色の部分は、
`position: absolute;`で左右の黄色の部分をいい感じのポジションにそれぞれ移動しさせます。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="oNyYOwN" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/oNyYOwN">
  ハイパーボール 3d - 2</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

※ ついでに、ボタンを押せるようにしてみました。


### 03.  ハイパーボールを立体的に見えるようにする
次に、↓このように ハイパーボールが立体的と輝いているように見えるようにしていきましょう！
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/70a18cc6-6ac8-cb6a-9b56-a3f19385a9e5.png)

`box-shadow`を使って、外径の内側と赤い部分に影をつけてあげると、立体感が出ます。
また、ハイパーボールの上部が暗いので、`box-shadow`で明るい影を落とします。

輝きを表現するためには、 `box-shadow` に複数の色のついた影を追加することで、輝きが表現できます。

```sample.css
div {
  box-shadow:
    0 0 50px #ffffff,
    -10px 0 80px #ff00ff,
    10px 0 80px #00ffff; 
}
```

このように、`box-shadow`に複数の色のついた影を追加することで、以下のようにハイパーボールを立体的に、輝いているように見せることができます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="xxzReYv" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/xxzReYv">
  ハイパーボール 3d - 3</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 完成. ハイパーボールをアニメーションさせる
最後にアニメーションさせたら、完成です。


輝きが回転して、ハイパーボールが目立つような CSS Animationを追加します。
輝きをを `translate` と `rotate` にを2秒で回転させます。

```sample.css
.shadow {
  animation: shadow-anim ease-in-out 2s infinite;
}

@keyframes shadow-anim {
  0% {
    rotate: 0deg;
    translate: 2px -2px;
  }
  50% {
    translate: -2px 2px;
  }
  100% {
    rotate: 360deg;
    translate: 2px -2px;
  }
}
```

このように記載することで、輝かしいハイパーボールが完成です。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="qBKqEJZ" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/qBKqEJZ">
  ハイパーボール 3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## まとめ

この記事では、CSSでハイパーボールを作ってみました。

アドベントカレンダーは、まだまだ4日目です。
アドベントカレンダー完走を目指して、あと21日分投稿するので、
是非、カレンダーを購読して、応援していただけると嬉しいです。

https://qiita.com/advent-calendar/2022/degudegu2510


---

最後まで読んでくださってありがとうございます！

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/degudegu2510