はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの12記事目です。
12記事目は、 「【完走賞ゲットだぜ！】CSSでスピードボールを作る！」です。
スピードボールは、すばやさがはやいポケモンが捕まえやすくなるボールです。
特にすばやさの種族値が100以上だと捕まえやすいので進化後のポケモンが捕まえやすい傾向にある優秀なボールです。
この記事では、CSSで作るスピードボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen スピードボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. スピードボールの外形を作る
まずは、↓このようなスピードボールの外形を作って行きましょう！
まず、この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、3色を上から順に
0% ~ 46% ： #d60012
46% ~ 54% ： black
54% ~ 100% ： White
と塗り分けることができます。
div {
background: linear-gradient(#d60012 46%, black 46% 54%, white 54%);
}
このようにすることで、以下のような形になります。
See the Pen スピードボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
02. スピードボールの内部を作る
次に、↓このようなスピードボールの内側の部分を作って行きましょう！
スピードボールの上部の黄色い模様は、長方形をclip-pathのpolygon(多角形)でいい感じの形に切り抜いて、それっぽい模様にしていきます。
polygon(多角形)では、頂点を１つずつ指定してあげることで、多角形を作成することができます。
今回の上部の黄色い模様は、以下のように作成しています。
.top_pattern {
clip-path: polygon(0% 20%, 25% 6%, 100% 50%, 25% 94%, 0% 80%, 48% 50%);
}
また、スピードボールの左右の黄色い模様は、linear-gradientで 黄色 → 黒 → 黄色となるような円形をいい感じの位置に2つ配置をしています。
ボタンの部分が、立体的に見えるように、中のボタンに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で２種類の影を使い、ボタン部分を作成することができます。
黄色い部分は、position: absolute; でいい感じ配置します。
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で、スピードボールの位置をアニメーションさせ、
scale と rotateを調整して、スピード感をアップさせます。
div {
animation: ball-anim 3s ease-in-out infinite;
}
@keyframes ball-anim {
0% {
translate: 0;
}
34% {
scale: 100% 100%;
rotate: -15deg;
}
35% {
translate: -100vw;
scale: 100% 70%;
rotate: 15deg;
}
65% {
translate: 100vw;
scale: 100% 70%;
rotate: 15deg;
}
66% {
scale: 100% 90%;
rotate: -15deg;
}
80% {
translate: -20%;
scale: 100% 100%;
rotate: -15deg;
}
100% {
translate: 0;
}
}
80%当たりのキーフレームあたりで、急停止しているようなアニメーションも追加しています。
このような感じに記載することで、スピードボールにスピード感が感じられるようなアニメーションが加わり、完成です。
See the Pen スピードボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでスピードボールを作ってみました。
このボールを使って、すばやさがはやいポケモンをたくさん捕まえてポケモンマスターを目指して行きましょう！
アドベントカレンダーは、今日で12日目が終わりました。
アドベントカレンダー完走を目指して、あと13日です。
引き続き投稿するので、是非、カレンダーを購読して、応援していただけると嬉しいです。
これからも、色々なものをどんどん作って行きます！
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！