のんべえの気まぐれ

日々の出来事やDIY、機械いじりを発信

【CSS】蝶と背景画像

いつも読んで頂きありがとうございます。

前回、蝶のCSSコードで遊びましたが画像の挿入方法とちょっと改良もしてみました。

 

飛ぶ蝶に背景画像を挿入する

元のコードはこちらのブログになります。

【CSS】蝶のはばたき - Little Strange Software

 
 

 

 

 

 

 

 

 

 

<style>
@keyframes hbtk0{
0%,70%{transform:rotateX(5deg) rotateY(0deg);}
100%{transform:rotateX(-9deg) rotateY(-360deg);}
/*rotateX=周回軌道の上下の傾き*/
}
@keyframes hbtka{
0%{transform:rotateY(90deg);}
100%{transform:rotateY(40deg);}

}
@keyframes hbtkb{
0%{transform:rotateY(90deg);}
100%{transform:rotateY(140deg);}
}
.hbtk,.hbtk div{
transform-style:preserve-3d;
perspective:500px;
}
.hbtk div,.hbtk div div{
width:50px;height:80px;
}
.hbtk{
margin-top:80px;
margin-left:15px;
animation:hbtk0 10s linear infinite;
/*周回のアニメーション呼び出し*/
}
.hbtk div{
position:relative;
transform:rotateX(60deg);/*蝶を前傾姿勢に*/
}
.hbtk div div{
position:absolute;
transform-origin:100% 50%;
animation:0.9s ease infinite alternate;
/*はばたきのアニメーション呼び出し*/
}
.hbtk div div:nth-child(1){
animation-name:hbtka;
}
.hbtk div div:nth-child(2){
animation-name:hbtkb;
}
.tanpopo{
position:absolute;  
background-image:url("背景画像URL");
background-size:100%;
width:340px;
height:220px;  
}
</style>
<div class="tanpopo">
<div class="hbtk">
<div>
<div><img src="蝶の画像" > </div>
<div><img src="蝶の画像" > </div>
</div>
</div>
</div>

コード説明

蝶を止めるには

@keyframes hbtk0{
0%,70%{transform:rotateX(5deg) rotateY(0deg);}
100%{transform:rotateX(-9deg) rotateY(-360deg);}

普通に周回だけなら0%と100%だけの設定ですが止めるには0%の所を0%,70%{○○;}と

すると0%~70%の間は止まります。100%の所を30%,100%にしても同じになります。

0%{transform:rotateX(5deg) rotateY(0deg);}
30%,100%{transform:rotateX(-9deg) rotateY(-360deg);}

 

背景の挿入

背景画像を挿入する場合はCSSコード内に画像のコードを追加します。名前は.tanpopo

にしていますが何でも良いです。まず、position:absolute;  で画像を固定します。これ

を設定しないと蝶の位置を調整すると画像も一緒に動いてしまいます。

width:340px;スマホのサイズに合わせています。大きくするとスマホで見た場合スマ

ホの画面から外れてしまいますがPCで見るには大きくしたいところなので考えどころで

すね。

 

蝶の位置調整

.hbtk{
margin-top:80px;
margin-left:15px;

margin-topは上からの位置、margin-leftは左からの位置になるので画像に合わせて調整

して下さい。transform:rotateX(60deg);/*蝶を前傾姿勢に*/で姿勢も調整しています。

 

蝶の動きの改良

最初は花に止まっているときは羽ばたかないで飛んだ時に羽ばたかせようとしましたが

上手くいかず妥協したところLSS(id:little_strange)さんがヒントをくれたので作ってみま

した。コメントに書くとバージョンアップしてくれるのでありがたいですね。

いつもありがとうございます。

 
 

 

 

 

 

 

 

 

 

<style>
@keyframes hbtk01{
0%,60%{transform:rotateX(5deg) rotateY(0deg);}
65%{transform:rotateX(8deg) rotateY(-80deg);}
70%{transform:rotateX(10deg) rotateY(-120deg);}
75%{transform:rotateX(20deg) rotateY(-160deg);}
80%{transform:rotateX(-5deg) rotateY(-200deg);}
85%{transform:rotateX(20deg) rotateY(-240deg);}
90%{transform:rotateX(10deg) rotateY(-280deg);}
95%{transform:rotateX(7deg) rotateY(-320deg);}
100%{transform:rotateX(5deg) rotateY(-360deg);}
/*rotateX=周回軌道の上下の傾き*/
}
@keyframes hbtka1{
0%,60%{transform:rotateY(40deg);}
62%,66%,70%,74%,78%,82%,86%,90%,94%,98%{transform:rotateY(90deg);}
64%,68%,72%,76%,80%,84%,88%,92%,96%,100%{transform:rotateY(40deg);}

}
@keyframes hbtkb1{
0%,60%{transform:rotateY(140deg);}
62%,66%,70%,74%,78%,82%,86%,90%,94%,98%{transform:rotateY(90deg);}
64%,68%,72%,76%,80%,84%,88%,92%,96%,100%{transform:rotateY(140deg);}
}
.hbtk1,.hbtk1 div{
transform-style:preserve-3d;
perspective:500px;
}
.hbtk1 div,.hbtk1 div div{
width:50px;height:80px;
}
.hbtk1{
 margin-top:80px;
 margin-left:15px;
animation:hbtk01 6s linear infinite;
/*周回のアニメーション呼び出し*/
}
.hbtk1 div{
position:relative;
transform:rotateX(60deg);/*蝶を前傾姿勢に*/
}
.hbtk1 div div{
position:absolute;
transform-origin:100% 50%;
animation:6s ease infinite ;
/*はばたきのアニメーション呼び出し*/
}
.hbtk1 div div:nth-child(1){
animation-name:hbtka1;
}
.hbtk1 div div:nth-child(2){
animation-name:hbtkb1;
}
.tanpopo1{
position:absolute;  
background-image:url("背景画像URL");
background-size:100%;
width:340px;
height:220px;  
}
</style>
<div class="tanpopo1">
<div class="hbtk1">
<div>
<div><img src="蝶の画像"> </div>
<div><img src="蝶の画像"> </div>
</div>
</div>
</div>

 

コードが競合しないようにclass名は変更しています。

改良コード説明

周回と上下運動

@keyframes hbtk01{

で0%から~60%の間止まっていてその後飛ぶようにしていますが、上下の運動も入れて

います。transform:rotateX(〇deg)を変えると上下の位置が変わります。

 

飛んでからの羽ばたき

羽ばたきのアニメーションanimation:6s ease infinite ;の秒数を周回アニメーションの

秒数と同じにします。そして60%以降に羽ばたくように

62%,66%,70%,74%,78%,82%,86%,90%,94%,98%{transform:rotateY(90deg);}
64%,68%,72%,76%,80%,84%,88%,92%,96%,100%{transform:rotateY(40deg);}

細かく%を刻んで羽ばたかせるようにしています。

止まってる時間、動いてる時間を調整しながら作ると良いと思います。

 

最後に

改良版の方がよりリアルになったような気がします。

mio(id:mio20100501)さんがいろいろ勉強しているので参考になればと記事にしましたが

keyframesは難しく奥が深いので私も分からない事が沢山あります。今回も夜な夜な弄

りながら作りました。頑張っている人は応援したいですね。

 

 

 

 

 

 

 

PVアクセスランキング にほんブログ村