Little Strange Software

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

【CSSサンプル】ふりむきカーン【ほぼジョークw】

 どうも!LSSです!!

 

暴れん坊将軍のテーマ、に歌詞があったんですね - Little Strange Software

にて、「振り向きカーン(勝手に作った造語)」の魅力を語りました。

 

が…「このかっこいい演出をCSSに持ち込めないか?」と妙な方向に思考が向かってしまい…作ってみちゃいましたw

 

ただ、Web閲覧中に不意に音が鳴るのを自分が良しと思わないため音はでませんが、その代わりにoutlineのアニメーションをつけています。(それカーンか?^^;)

 

 

ふりむきカーン

ふりむきカーン

 

 ↑の傾いた四角にマウスカーソルをのせてみてください^^

 

 

 

コード

<style><!--
@keyframes knanm{
0%{outline:0px #ffd400ff solid;}
100%{outline:50px #ffd40000 solid;}
}
.frmk{
transform: perspective(100px) translateZ(-30px) rotateY(-8deg);
transform-origin:80% 50%;
width: 300px;
border: 1px solid black;
font-size: 40px;
transition:0.1s linear 0s;
}
.frmk:hover{
transform: perspective(100px) translateZ(-80px) rotateY(20deg);
animation:knanm 0.5s linear 0s 1;
}
--></style>
<div class="frmk">ふりむきカーン</div>

 

 

コード解説

<div class="frmk">ふりむきカーン</div>

が振り向く要素です。

赤文字部分を好きな言葉に変えて使用できます。

 

 .frmk{
transform: perspective(100px) translateZ(-30px) rotateY(-8deg);
transform-origin:80% 50%;
width: 300px;
border: 1px solid black;
font-size: 40px;
transition:0.1s linear 0s;
}

の部分が基本のCSS装飾設定部分となります。

赤文字部分が見た目を設定している部分ですので、自由に書き換え可ですし、加えて背景色などを指定する事もできます^^

 

この最後の、

transition:0.1s linear 0s;

0.1s の部分が「振り向きにかかる時間」を指定している部分で、これだと0.1秒で振り向いている事になります。

 

.frmk:hover{
transform: perspective(100px) translateZ(-80px) rotateY(20deg);
animation:knanm 0.5s linear 0s 1;
}

が「振り向いた後の変更点」を指定している部分となります。

こちらは、0.5sが「黄色いoutlineが広がるのにかかる時間」で、0.5秒という設定ですね。

 

その他、今回使ったCSSプロパティについて触れている主な過去記事です。↓

  

 

振り向きカーンの魅力

このサンプルで伝わりますでしょうか?

 

 「殺陣中の吉宗がやるからかっこいいんだ!」←ごもっともですwww

 

 

 

 

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

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