Little Strange Software

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

【CSS】蝶のはばたき

 どうも!LSSです!!

 

かなり前(約2年!?)なんですが、↓こういうCSSネタを書いていました。

little-strange.hatenablog.com

CSSを触るようになって、ちょっと慣れてきた頃…でしょうか。
「別バージョン」に苦戦している様子が見られますw

 

そして最近になって、これを使って素敵なアニメーションに仕上げていただきました^^

mio20100501.hatenablog.com

 

なるほど、「とことこ歩く」の揺れが蝶のはばたきのように見えますね!

イデアで拙作のCSSを楽しく活用していただいているのがとても有難いです^^

 

と、これを見ているうちに「2枚の画像を別々に動かせば、よりリアルにはばたいてるような感じが作れるかも?」と意欲が湧き、挑戦してみました!

 

 

蝶のはばたき

 
 

 

 

コード

<style>
@keyframes hbtk0{
0%{transform:rotateX(-5deg) rotateY(0deg);}
100%{transform:rotateX(-5deg) rotateY(-360deg);}
/*rotateX=周回軌道の上下の傾き*/
}
@keyframes hbtka{
0%{transform:rotateY(90deg);}
100%{transform:rotateY(60deg);}
}
@keyframes hbtkb{
0%{transform:rotateY(90deg);}
100%{transform:rotateY(120deg);}
}
.hbtk,.hbtk div{
transform-style:preserve-3d;
perspective:500px;
}
.hbtk div,.hbtk div div{
width:50px;height:80px;
}
.hbtk{
animation:hbtk0 12s linear infinite;
/*周回のアニメーション呼び出し*/
}
.hbtk div{
position:relative;
transform:rotateX(20deg);/*蝶を前傾姿勢に*/
}
.hbtk div div{
position:absolute;
transform-origin:100% 50%;
background-image:
radial-gradient(25px 25px at 25px 25px,#ffffff 95%,#000000 99%,#00000000 100%)
,radial-gradient(20px 20px at 30px 55px,#ffffff 95%,#000000 99%,#00000000 100%);
/*羽の描画 画像に置き換える場合は、background-image:url('画像ファイルアドレス');*/
animation:0.5s ease infinite alternate;
/*はばたきのアニメーション呼び出し*/
}
.hbtk div div:nth-child(1){
animation-name:hbtka;
}
.hbtk div div:nth-child(2){
animation-name:hbtkb;
}
</style>
<div class="hbtk">
<div>
<div> </div>
<div> </div>
</div>
</div>

 

 

コード中にコメントを入れてみました

/*コメント文*/

のように緑色にした部分がコメントで、この/*と*/で囲まれた部分はブラウザがCSSを解釈する際に無視される箇所なので、削っても自由に書き足しても動作に影響しません。

 

そのコメントにも書いたのですが、

background-image:
radial-gradient(25px 25px at 25px 25px,#ffffff 95%,#000000 99%,#00000000 100%)
,radial-gradient(20px 20px at 30px 55px,#ffffff 95%,#000000 99%,#00000000 100%);

が蝶の羽を描いている部分で、これを

background-image:url('画像ファイルアドレス');

に置き換える事で、ただの円を2つ並べた羽をリアルな画像にする事も可能です^^

 

その際は、

の条件を満たす画像を用意してください。

↑こんな感じ(緑部分が透過されている事)ですね。

 

 

あとがき

以前の「とことこ~」から今日まで、色々書いてきた事で出来る事も増えてきました^^

中でもCSSの3D表現は面白くもあり難しくもあり^^;

 

「とことこ~」の別バージョンは「中央に来た時に見えなくなる」のが気に入ってなくて、「見えなくなるのは端の時、中央の時にフルに見える」ようにしたかったのが出来なくて、画像を前面と背面にしたんだったか…なんて事も思い出したり。

 

今回ようやくリベンジできたかも?^^

 

 

 

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

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