【CSS】姫のスクワット（？）
どうも！LSSです！！
ですが、やはり例として分かり辛かったですね^^;
伸び縮みしているのか、単に隠れているのかという辺りが特に。
画像を使ってみるにあたり、
で使った方法をまた用いてみました。
そして、勢いで２パターン作ったので公開します^^
お姫様のお辞儀かと思ったらやっぱりスクワット
コード
<style>
@keyframes testa{
0%{height:200px;}
100%{height:100px;}
}
@keyframes testb{
0%{top:0px;}
100%{top:100px;}
}
.test{
position:relative;
width:280px;
height:400px;
}
.test div{
position:relative;
width:100%;
left:0;
background-image:url('画像ファイルのURL');
background-size:100% 200%;
}
.test div:nth-child(1){
height:200px;
background-position:0 0;
animation:testb 1s linear infinite alternate;
}
.test div:nth-child(2){
background-position:0 100%;
animation:testa 1s linear infinite alternate,testb 1s linear infinite alternate;
}
</style>
<div class="test">
<div> </div>
<div> </div>
</div>
コード中、青文字部分は使いたい画像ファイルのURLに差し替えてください。
なお、画像は
で即興で描いてみましたｗ
ノリノリの姫
コード
<style>
@keyframes rzmsa{
0%,12.5%,37.5%,50%,62.5%,100%{height:200px;}
3.125%,40.625%,53.125%{height:100px;}
}
@keyframes rzmsb{
0%,12.5%,37.5%,50%,62.5%,100%{top:0px;}
3.125%,40.625%,53.125%{top:100px;}
}
.rzms{
position:relative;
width:280px;
height:400px;
}
.rzms div{
position:relative;
width:100%;
left:0;
background-image:url('画像ファイルのURL');
background-size:100% 200%;
}
.rzms div:nth-child(1){
height:200px;
background-position:0 0;
animation:rzmsb 2.5s linear infinite;
}
.rzms div:nth-child(2){
background-position:0 100%;
animation:rzmsa 2.5s linear infinite,rzmsb 2.5s linear infinite;
}
</style>
<div class="rzms">
<div> </div>
<div> </div>
</div>
こちら、姫の動きがリズミカルになっていますｗ
リズムを指定しているのはオレンジ文字部分の%指定の羅列で、これは
を利用しました。
ちなみに、
↑こんな風に指定しています。
あとがき
色々過去記事を寄せ集めた、内部リンク祭りになりましたｗ
画像作成ツールは、ファイル保存まで実装しているものの公開版はだいぶ前のやり方で作っていたもので、早めになんとかしたいと思いましたね^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
