Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】ボール乱舞【小ネタ】

 

 どうも!LSSです!!

 

little-strange.hatenablog.com

にブックマークコメントで、

3Dみたい。これ、大量にランダムに跳ねてたら可愛いかも。めんどくさい?笑

 

といただきました^^

さじ様、ありがとうございます!


大量に跳ねてると、楽しくなりそうですね!

ランダムに、の部分については、「横移動」「縦移動」「サイズ変更」のアニメーションの「再生にかかる時間」をずらす事で周期をずれさせてランダムっぽく見せていました。

ので、「大量にランダムに」という感じにしようとすると単一のHTML要素にbackgroundをカンマ区切りで並べる方式ではなく、HTML要素自体を大量に用意するのが良さそうです。

 

コードは流用できる部分が多いものの、構造から変わってくるので、試しに作ってみました!(汎用性については…謎w)

 

 

ボール乱舞

 
 
 
 
 
 

 

 

コード

<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タグに対する指定か」を指定】
の対象となる部分です。

 

…例えば、今6つあるボールに7つめを追加しようと思うと、

  • <div> </div>」をもうひとつ追加
  • .radials div:nth-child(1){中略}」を更にもうひとつコピペし、17に、あと他の緑色の変更箇所を適当に書き換える

事で、追加する事ができます!

 

 

3Dっぽいけど3Dじゃない件

動きを見ていただいて分かる事で…この「大きさが変わる」のが「3Dで手前と奥を行き来している」かのように見えていましたが…。

CSSの3D要素を使用していないので、前後関係は「divタグの並び順」のままとなり、大きいボールより小さいボールが手前に見える事も平然と起こります。

 

ボールが2つ以上になると誤魔化せなくなりますねw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^