【CSS】ボール乱舞【小ネタ】
どうも！LSSです！！
にブックマークコメントで、
conasaji
といただきました^^
さじ様、ありがとうございます！
大量に跳ねてると、楽しくなりそうですね！
ランダムに、の部分については、「横移動」「縦移動」「サイズ変更」のアニメーションの「再生にかかる時間」をずらす事で周期をずれさせてランダムっぽく見せていました。
ので、「大量にランダムに」という感じにしようとすると単一のHTML要素にbackgroundをカンマ区切りで並べる方式ではなく、HTML要素自体を大量に用意するのが良さそうです。
コードは流用できる部分が多いものの、構造から変わってくるので、試しに作ってみました！（汎用性については…謎ｗ）
ボール乱舞
コード
<style>
@keyframes radialsx{
0%,100%{background-position-x:0%;}
50%{background-position-x:100%;}
}
@keyframes radialsy{
0%,100%{background-position-y:0%;}
50%{background-position-y:100%;}
}
@keyframes radialsz{
0%,100%{background-size:100px 100px;}
50%{background-size:30px 30px;}
}
.radials{
position:relative;
height:300px;
}
.radials div{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
animation:
radialsx linear infinite
,radialsy linear infinite
,radialsz ease-in-out infinite
;
}
.radials div:nth-child(1){
background-image:radial-gradient(farthest-side,#ffffff 5%,#00ffff 90%,#000000 99%,#00000000 100%);
animation-duration:7s,5s,3s;
}
.radials div:nth-child(2){
background-image:radial-gradient(farthest-side,#ffffff 5%,#ff00ff 90%,#000000 99%,#00000000 100%);
animation-duration:5s,4s,7s;
}
.radials div:nth-child(3){
background-image:radial-gradient(farthest-side,#ffffff 5%,#ffff00 90%,#000000 99%,#00000000 100%);
animation-duration:4s,7s,6s;
}
.radials div:nth-child(4){
background-image:radial-gradient(farthest-side,#ffffff 5%,#ff8888 90%,#000000 99%,#00000000 100%);
animation-duration:8s,9s,4s;
}
.radials div:nth-child(5){
background-image:radial-gradient(farthest-side,#ffffff 5%,#88ff88 90%,#000000 99%,#00000000 100%);
animation-duration:9s,3s,5s;
}
.radials div:nth-child(6){
background-image:radial-gradient(farthest-side,#ffffff 5%,#8888ff 90%,#000000 99%,#00000000 100%);
animation-duration:3.4s,4.3s,2.6s;
}
</style>
<div class="radials">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
ちょっとコードが長ったらしいですが
その大半を占める、オレンジ文字の部分。
これは、
.radials div:nth-child(1){
background-image:radial-gradient(farthest-side,#ffffff 5%,#00ffff 90%,#000000 99%,#00000000 100%);
animation-duration:7s,5s,3s;
}
をコピペして、緑文字部分だけを書き換えています。
まず「1」が「何番目のdivタグに対する指定か」を指定し、「#00ffff」がボールの色、「7s,5s,3s」が「横移動」「縦移動」「サイズ変更」のアニメーションにかける再生時間を指定しています。
これらの項目以外の、共通設定は、
.radials div{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
animation:
radialsx linear infinite
,radialsy linear infinite
,radialsz ease-in-out infinite
;
}
に集約していて、ボールごとに異なる部分だけを
.radials div:nth-child(1){
で個別指定している感じですね^^
一方、HTML要素の方では、
<div class="radials">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
と、クラス名「radials」（任意の名前）をつけたdivタグの中に、
<div> </div>
を並べています。
この青いdivタグが、前述の
【まず「1」が「何番目のdivタグに対する指定か」を指定】
の対象となる部分です。
…例えば、今６つあるボールに７つめを追加しようと思うと、
- 「<div> </div>」をもうひとつ追加
- 「.radials div:nth-child(1){中略}」を更にもうひとつコピペし、1を7に、あと他の緑色の変更箇所を適当に書き換える
事で、追加する事ができます！
３Dっぽいけど３Dじゃない件
動きを見ていただいて分かる事で…この「大きさが変わる」のが「３Dで手前と奥を行き来している」かのように見えていましたが…。
CSSの３D要素を使用していないので、前後関係は「divタグの並び順」のままとなり、大きいボールより小さいボールが手前に見える事も平然と起こります。
ボールが２つ以上になると誤魔化せなくなりますねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
3Dみたい。これ、大量にランダムに跳ねてたら可愛いかも。めんどくさい？笑