ちょっとCSSの実験・改
どうも！LSSです！！
先日、
という記事をあげていましたが、少しそれに手を加えてみました。
サンプル
コード
<style><!--
@keyframes tbds{
0%{top:-20%;left:100%;}
30%{top:5%;left:2%;}
31%{top:5%;left:8%;}
32%{top:5%;left:3%;}
33%{top:5%;left:7%;}
34%{top:5%;left:4%;}
35%{top:5%;left:6%;}
36%{top:5%;left:5%;}
70%{top:5%;left:5%;}
80%{top:-20%;left:-100%;}
100%{top:-20%;left:-100%;}
}
--></style>
<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
<div style="position: absolute; width: 90%; height: 90%; overflow: hidden; animation: tbds 8s linear 0s infinite; padding: 1em;">
<img src="画像ファイルのURL" width="100%" />
</div>
</div>
やった事と言えば…
中身を画像にしたり、背景色を消したり、サイズを調節したりもしましたが、最大の違いはアニメーションの内容ですね。
0%{top:-20%;left:100%;}
30%{top:5%;left:2%;}
31%{top:5%;left:8%;}
32%{top:5%;left:3%;}
33%{top:5%;left:7%;}
34%{top:5%;left:4%;}
35%{top:5%;left:6%;}
36%{top:5%;left:5%;}
70%{top:5%;left:5%;}
80%{top:-20%;left:-100%;}
100%{top:-20%;left:-100%;}
左右位置指定を、5%でとどまる前に、2%まで行ったり8%まで戻ったり、3%までまた進んで7%まで戻って…という動きを加えた事で、停止前にガクガク震えていますｗ
前回の記事に、のんべえ様からいただいたコメントの内容を実現してみました^^
transform:skew
とかを使ってみるとより面白い動きになりそう？とも思ったり。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
