【CSS】跳ね続けるボールとfloat:left;【小ネタ】
どうも！LSSです！！
CSS小ネタとして、跳ねるボールを作ってみました。
と、ボールが跳ねるようなものはこれまでにも作っていましたが、
「着地して跳ね返る時に横長にひしゃげる」
という細かい芸を入れています。
跳ね続けるボールとfloat:left;
ボールが跳ね続けます。
そして、float:left;を指定しているため、それ以降の文章がこのように回り込むカタチになります。
float:left;の一行を削除すると、横に文章が並ぶ事がなくなります。
コード
<style>
@keyframes bnda{
0%,100%{background-position:0 0;}
50%{background-position:0 100%;}
0%,47%,57%,100%{background-size:30px 30px;}
50%{background-size:30px 5px;}
}
.bnd{
width:30px;
height:100px;
background-image:radial-gradient(farthest-side,#aaffaa 99%,#aaffaa00 100%);
background-repeat:no-repeat;
float:left;
animation:bnda 3s linear infinite;
}
</style>
<div class="bnd"> </div>
<p>文章</p>
<p>文章</p>
<p>文章</p>
<p>文章</p>
色々…
コード中、
height:100px;
の数値を変更すると、「ボールが跳ねる範囲となっている見えない枠の高さ」が変わります。
コードの終わりの
<p>文章</p>
は、あってもなくても、多くても少なくてもOKですが、ボールの右側に回り込む事になります。
ボールを描いているのは、
background-image:radial-gradient(farthest-side,#aaffaa 99%,#aaffaa00 100%);
の箇所で、radial-gradientで描いていますが、これを
background-image:url('画像ファイルのURL');
に置き換える（赤文字部分は跳ねさせたい画像のURLに書き換える）と、その画像ファイルが着地時にひしゃげながらも、跳ね続ける事になります^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
