はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの4記事目です。
4記事目は、 「【完走賞ゲットだぜ！】CSSでハイパーボールを作る！」です。
ポケモントレーナーに必要なものの1つは、ハイパーボールですよね。(間違えない。)
ハイパーボールは、スーパーボールよりもさらに捕獲補正率が高まるボールです。
ほとんどのトレーナーは、ストーリー上ではハイパーボールを一番使っているのではないでしょうか？
そのため、この記事では、CSSで作るハイパーボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen ハイパーボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. ハイパーボールの外形を作る
まずは、↓このようなハイパーボールの外形を作って行きましょう！
この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、上から順に
0% ~ 46% ： #1a1a1a
46% ~ 54% ： Black
54% ~ 100% ： White
と塗り分けることができます。
div {
background:linear-gradient(#1a1a1a 46%, black 46%, black 54%, white 54%);
}
この linear-gradient を使い以下のように記載するとハイパーボールの外形を作ることができます。
See the Pen ハイパーボール 3d - 1 by でぐぅー | Qiita (@sp_degu) on CodePen.
02. ハイパーボールの内部を作る
次に、↓このようなハイパーボールの内部を作っていきましょう！
モンスターボールの記事と同様にボタン部分作成します。
また、ハイパーボールの黄色の部分は、
position: absolute;で左右の黄色の部分をいい感じのポジションにそれぞれ移動しさせます。
See the Pen ハイパーボール 3d - 2 by でぐぅー | Qiita (@sp_degu) on CodePen.
※ ついでに、ボタンを押せるようにしてみました。
03. ハイパーボールを立体的に見えるようにする
次に、↓このように ハイパーボールが立体的と輝いているように見えるようにしていきましょう！
box-shadowを使って、外径の内側と赤い部分に影をつけてあげると、立体感が出ます。
また、ハイパーボールの上部が暗いので、box-shadowで明るい影を落とします。
輝きを表現するためには、 box-shadow に複数の色のついた影を追加することで、輝きが表現できます。
div {
box-shadow:
0 0 50px #ffffff,
-10px 0 80px #ff00ff,
10px 0 80px #00ffff;
}
このように、box-shadowに複数の色のついた影を追加することで、以下のようにハイパーボールを立体的に、輝いているように見せることができます。
See the Pen ハイパーボール 3d - 3 by でぐぅー | Qiita (@sp_degu) on CodePen.
完成. ハイパーボールをアニメーションさせる
最後にアニメーションさせたら、完成です。
輝きが回転して、ハイパーボールが目立つような CSS Animationを追加します。
輝きをを translate と rotate にを2秒で回転させます。
.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;
}
}
このように記載することで、輝かしいハイパーボールが完成です。
See the Pen ハイパーボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでハイパーボールを作ってみました。
アドベントカレンダーは、まだまだ4日目です。
アドベントカレンダー完走を目指して、あと21日分投稿するので、
是非、カレンダーを購読して、応援していただけると嬉しいです。
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！