Little Strange Software

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

【CSS】姫のスクワット(?)

 

 どうも!LSSです!!

 

little-strange.hatenablog.com

ですが、やはり例として分かり辛かったですね^^;

伸び縮みしているのか、単に隠れているのかという辺りが特に。

 

画像を使ってみるにあたり、

little-strange.hatenablog.com

で使った方法をまた用いてみました。

 

そして、勢いで2パターン作ったので公開します^^

 

 

お姫様のお辞儀かと思ったらやっぱりスクワット

 
 

 

 

コード

<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に差し替えてください。

なお、画像は

little-strange.hatenablog.com

で即興で描いてみましたw

 

 

ノリノリの姫

 
 

 

 

コード

<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>

 

こちら、姫の動きがリズミカルになっていますw

リズムを指定しているのはオレンジ文字部分の%指定の羅列で、これは

little-strange.hatenablog.com

を利用しました。

 

ちなみに、

↑こんな風に指定しています。

 

 

あとがき

色々過去記事を寄せ集めた、内部リンク祭りになりましたw

画像作成ツールは、ファイル保存まで実装しているものの公開版はだいぶ前のやり方で作っていたもので、早めになんとかしたいと思いましたね^^;

 

 

 

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

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