はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの13記事目です。
13記事目は、 「【完走賞ゲットだぜ！】CSSでラブラブボールを作る！」です。
ラブラブボールは、自分と相手が同じポケモンで性別が異なる場合に捕まえやすくなるボールです。
そのため、はじめて捕まえるポケモンには使えないため、何匹も捕まえたいポケモンには使えるボールです。
この記事では、CSSで作るラブラブボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen ラブラブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. ラブラブボールの外形を作る
まずは、↓このようなラブラブボールの外形を作って行きましょう！
まず、この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、3色を上から順に
0% ~ 46% ： #EE86B4
46% ~ 54% ： black
54% ~ 100% ： White
と塗り分けることができます。
div {
background: linear-gradient(#EE86B4 46%, black 46% 54%, white 54%);
}
このようにすることで、以下のような形になります。
See the Pen ラブラブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
02. ラブラブボールの内部を作る
次に、↓このようなラブラブボールの内側の部分を作って行きましょう！
ラブラブボールのハート模様は、正方形と半円を2つ重ねて作成することができます。
作り方のイメージは、こんな感じです。
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種類の影ごとに,区切ると複数の影を使うことができます。
div {
box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -3px -3px 4px rgba(255,255,255,0.2);
}
このように、box-shadowで２種類の影を使い、ボタン部分を作成することができます。
See the Pen ラブラブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
※ ついでに、ボタンを押せるようにしてみました。
03. ラブラブボールを立体的に見えるようにする
次に、↓このようにラブラブボールが立体的に見えるようにして行きましょう！
box-shadowを使って、内側に影をつけてあげると、立体感が出ます。
内側に影を出すためには、 box-shadow に inset を追加することで、内側になります。
div {
box-shadow: -20px -10px 40px rgba(0, 0, 0, .5) inset;
}
このように、box-shadowにinsetを使うことで、以下のようにラブラブボールを立体的に見せることができます。
See the Pen ラブラブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
完成. ラブラブボールをアニメーションさせる
最後にアニメーションさせたら、完成です。
ラブラブボールには、ボールの揺れに合わせて、背景にハートのエフェクトが表示されるCSS Animationを追加します。
まずは以下のように、translateとrotateで、ラブラブボールに揺れるアニメーションさせます。
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;
}
}
次に、背景に背景にハートのエフェクトが表示して、フェードアウトしていくようなアニメーションを以下のように作成して行きます。
.background {
animation: background-anim 2s ease-in-out infinite;
}
@keyframes background-anim {
20% {
scale: 0;
opacity: 1;
}
100% {
scale: 500%;
opacity: 0;
}
}
このような感じに記載することで、ラブラブボールにボールの揺れに合わせて、背景にハートのエフェクトが表示されるアニメーションが加わり、完成です。
See the Pen ラブラブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでラブラブボールを作ってみました。
このボールを使って、すばやさがはやいポケモンをたくさん捕まえてポケモンマスターを目指して行きましょう！
アドベントカレンダーは、今日で13日目が終わり、あと半分です。
アドベントカレンダー完走を目指して、あと12日です。
後半戦も引き続き投稿するので、是非、カレンダーを購読して、応援していただけると嬉しいです。
これからも、色々なものをどんどん作って行きます！
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！