いつも読んで頂きありがとうございます。
明日はひな祭りですね。次女も来月から一人暮らしで家から出ていくので今年のひな祭
りが家でやる最後になります。
【CSS小ネタ３種】いろいろ跳ねます。 - Little Strange Software
最後だと言うのに
次女と一緒にひな祭りをするのは最後ですが、私が会社都合で泊りとなったので一緒に
することが出来なくなりました。そして、娘に言うと「別にいいよ、残った3人で美味
しいの食べるから」まあ、予想通りの返答です。
ひな祭りと言っても我が家では特別な料理は決めていなく、嫁と娘が食べたい物を食べ
て最後にケーキが食べられればいいという感じです。
跳ねるボール応用編
跳ねるボールの応用を今回もしていますがちょっと参考に。
<style>
@keyframes boundx{
0%{background-position-x:100%;}
21%{background-position-x:0%;}
44%{background-position-x:100%;}
60%{background-position-x:35%;}
100%{background-position-x:35%;}
}
@keyframes boundy{
0%{background-position-y:0%;}
20%{background-position-y:45%;}
35%{background-position-y:15%;}
50%{background-position-y:100%;}
60%{background-position-y:50%;}
100%{background-position-y:50%;}
}
.boundball{
width:300px;
height:200px;
border-radius:15px;
animation:boundx 3s linear infinite alternate,boundy 2.5s linear infinite alternate;
background-color:#ddffdd;
background-image:radial-gradient(15px,#aaeeaaff 80%,#aaeeaa00 100%);
background-size:30px 30px;
background-repeat:no-repeat;
}
@keyframes boundx2{
0%{background-position-x:100%;}
25%{background-position-x:0%;}
45%{background-position-x:100%;}
60%{background-position-x:50%;}
100%{background-position-x:50%;}
}
@keyframes boundy2{
0%{background-position-y:100%;}
20%{background-position-y:65%;}
35%{background-position-y:0;}
50%{background-position-y:100%;}
60%{background-position-y:50%;}
100%{background-position-y:50%;}
}
.boundball2{
width:300px;
height:200px;
border-radius:15px;
animation:boundx2 3s linear infinite alternate,boundy2 2.5s linear infinite alternate;
background-image:radial-gradient(15px,#6495edff 80%,#6495ed00 100%);
background-size:30px 30px;
background-repeat:no-repeat;
}
@keyframes boundx3{
0%{background-position-x:100%;}
20%{background-position-x:0%;}
40%{background-position-x:100%;}
60%{background-position-x:65%;}
100%{background-position-x:65%;}
}
@keyframes boundy3{
0%{background-position-y:100%;}
15%{background-position-y:35%;}
35%{background-position-y:15%;}
47%{background-position-y:100%;}
60%{background-position-y:50%;}
100%{background-position-y:50%;}
}
.boundball3{
width:300px;
height:200px;
border-radius:15px;
animation:boundx3 3s linear infinite alternate,boundy3 2.5s linear infinite alternate;
background-image:radial-gradient(15px,#f0e68cff 80%,#f0e68c00 100%);
background-size:30px 30px;
background-repeat:no-repeat;
}
</style>
<div class="boundball">
<div class="boundball2">
<div class="boundball3">
</div>
</div>
</div>
中央で止める
ボールを中央で止めるには@keyframes boundy（ｙ軸）の
60%と100%の{background-position-y:○○%;}を50％にすると中央に止まります。
@keyframes boundx（x軸）も同じで
60%と100%の{background-position-x:○○%;}を50％にすると中央に止まります。
x軸もy軸も○%を変えるとｘ軸は左右にy軸は上下に調整できます。
ボールを2個以上追加する場合
ボールを2個以上追加する場合は@keyframes boundxと@keyframes boundy及びクラ
ス名の.boundballを追加してください。
この時に同じkeyframes名とクラス名だと競合しますので@keyframes boundx2、
@keyframes boundy2及びクラス名を.boundball2のようにしてください。
2個以上追加する場合は背景色は必要ないのでbackground-colorは必要ないです。
border-radiusは残していますが無くても大丈夫だと思います。
ボールの動きの調整
x軸とy軸の0％～60％までの間のkeyframesは自由に弄ると動きの調整ができます。
0％～60％に多く入れると動きが早くなります。
keyframesの調整はいろいろ弄ってやってみてください。
画像を使う場合
画像を使う場合はbackground-image：url（"画像URL”);で可能です。
パズルみたいにして最後に合わすのも良いですがx軸とy軸の調整が面倒です。
画像の大きさの調整はbackground-size:○%の方が良いかもしれません。
最後に
ひな祭りは娘と過ごせなくて残念ですが（娘はそう思っていない）一緒にいる時間も少
なくなってきました。入学式も保護者の出席がダメになったのも残念です。
早くコロナが終わってほしいですね。
跳ねるボール応用編は説明不足の所もありますがご了承ください。
