【CSS】跳ね続けるボールとfloat:left;【小ネタ】 - Little Strange Software

どうも！LSSです！！ CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、 「着地して跳ね返る時に横長にひしゃげる」 という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色々… 跳ね続けるボールと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

[konma08]

面白いですねぇ〜(*´∀｀*)相変わらずくすぐられます…が未だ自分のブログでできず…(T_T)

[kefugahi]

これも面白そうな表現です。ボールは変えられるのかな？色々想像が膨らみます

[yu_me_po-lly]

お疲れ様です。凄いなぁ。

[akazukin_diary]

変形すると、動きに躍動感出ますね！

[conasaji]

お、これこの前パワポで再現できないか悩んで、できなくもないけど非常にめんどくてやめた動きですw てことは、お星さまが次回伏線回収！？（しつこい？）

[newgenworld]

お疲れ様です🙋またまた面白いのが出ましたね☺💕