【完走賞ゲットだぜ！】CSSでラブラブボールを作る！

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

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

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

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

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

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

ラブラブボールは、自分と相手が同じポケモンで性別が異なる場合に捕まえやすくなるボールです。
そのため、はじめて捕まえるポケモンには使えないため、何匹も捕まえたいポケモンには使えるボールです。

この記事では、CSSで作るラブラブボールを紹介しようと思います。


## 完成形
完成形は**↓こちら**です。
影やアニメーションを用いて、球体を表現しています。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBKPNea" 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/qBKPNea">
  ラブラブボール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/a7f84fa6-5a2d-c0c8-9248-f0f6781c999d.png)

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

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

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

このようにすることで、以下のような形になります。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="OJEOZBB" 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/OJEOZBB">
  ラブラブボール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>


### 02. ラブラブボールの内部を作る
次に、↓このようなラブラブボールの内側の部分を作って行きましょう！
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/acfc307f-ebb6-ad64-1655-316062474f4a.png)

ラブラブボールのハート模様は、正方形と半円を2つ重ねて作成することができます。
作り方のイメージは、こんな感じです。

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/74daed4e-17bc-6b82-aa75-e9949506ff56.png)

CSSはこんな感じで作成しています。
```sample.css
/*正方形の部分*/
.heart {
  background-color: #fadce9;
  height: 36px;
  position: absolute;
  width: 36px;
  top: 28px;
  rotate: 45deg;
  border: 3px solid white;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent
}

/*半円の右側の部分*/
.heart::before {
  content: "";
  background-color: #fadce9;
  position: absolute;
  top: -63%;
  left: -3px;
  width: 100%;
  height: 50%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 3px solid white;
  border-bottom: 1px solid transparent;
}

/*半円の左側の部分*/
.heart::after {
  content: "";
  background-color: #fadce9;
  position: absolute;
  top: -3px;
  left: -63%;
  width: 50%;
  height: 100%;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  border: 3px solid white;
  border-right: 1px solid transparent;
}
```


また、ラブラブボールのボタンの部分が、立体的に見えるように、中のボタンに`box-shadow`を使い２種類の影を使っています。
`box-shadow`は以下のように、1種類の影ごとに`,`区切ると複数の影を使うことができます。

```sample.css
div {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -3px -3px 4px rgba(255,255,255,0.2);
}
```

このように、`box-shadow`で２種類の影を使い、ボタン部分を作成することができます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="BaVmxqG" 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/BaVmxqG">
  ラブラブボール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>

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


### 03. ラブラブボールを立体的に見えるようにする
次に、↓このようにラブラブボールが立体的に見えるようにして行きましょう！
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/817aba43-64f1-6b7e-9ef2-c3f6dfaae354.png)

`box-shadow`を使って、内側に影をつけてあげると、立体感が出ます。
内側に影を出すためには、 `box-shadow` に `inset` を追加することで、内側になります。

```sample.css
div {
  box-shadow: -20px -10px 40px rgba(0, 0, 0, .5) inset;
}
```

このように、`box-shadow`に`inset`を使うことで、以下のようにラブラブボールを立体的に見せることができます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGKYMmz" 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/bGKYMmz">
  ラブラブボール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 Animationを追加します。

まずは以下のように、`translate`と`rotate`で、ラブラブボールに揺れるアニメーションさせます。

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

@keyframes ball-anim {
  30% {
    translate: 0px;
    rotate: 0deg;
  }
  40% {
    translate: 20px;
    rotate: 25deg;
  }
  60% {
    translate: -20px;
    rotate: -25deg;
  }
  70% {
    translate: 0px;
    rotate: 0deg;
  }
  100% {
    translate: 0px;
    rotate: 0deg;
  }
}
```


次に、背景に背景にハートのエフェクトが表示して、フェードアウトしていくようなアニメーションを以下のように作成して行きます。

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

@keyframes background-anim {
  20% {
    scale: 0;
    opacity: 1;
  }
  100% {
    scale: 500%;
    opacity: 0;
  }
}
```

このような感じに記載することで、ラブラブボールにボールの揺れに合わせて、背景にハートのエフェクトが表示されるアニメーションが加わり、完成です。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="qBKPNea" 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/qBKPNea">
  ラブラブボール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でラブラブボールを作ってみました。
このボールを使って、すばやさがはやいポケモンをたくさん捕まえてポケモンマスターを目指して行きましょう！

アドベントカレンダーは、今日で13日目が終わり、あと半分です。
アドベントカレンダー完走を目指して、あと12日です。
後半戦も引き続き投稿するので、是非、カレンダーを購読して、応援していただけると嬉しいです。

これからも、色々なものをどんどん作って行きます！

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

---

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

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

https://twitter.com/degudegu2510