(((;゚Д゚)))ガクガクブルブル
これ有名ですよね!
通称ガクブル!!
今回はCSSを使用してガクブルを作っていくべ!
(((;゚Д゚)))ガクガクブルブル

ガクブルをCSSで表現する

では早速CSSを使用して(((;゚Д゚)))ガクガクブルブルを表現していきます。

まずはテキトーにHTMLを書いてと

[html]
<div class="gakuburu">
(((;゚Д゚)))ガクガクブルブル
</div>
[/html]

CSSでkeyframesを書いて、実装する

[css]
.gakuburu {
display: inline-block;
animation: gakuburu .1s infinite;
}

@keyframes gakuburu {
0% {transform: translate(0px, 0px) rotateZ(0deg)}
25% {transform: translate(2px, 2px) rotateZ(1deg)}
50% {transform: translate(0px, 2px) rotateZ(0deg)}
75% {transform: translate(2px, 0px) rotateZ(-1deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
[/css]

するとこんな感じ!

(((;゚Д゚)))ガクガクブルブル

ぶるっとるな!!
最高にぶるってやがる!

これをhover時に設定しといたら、なんか面白く使えそうだよね。
例えば・・・

ホンマに押すの・・・?
ねー?
ホンマ?
まじかああああああ!

(((;゚Д゚)))ガクガクブルブル

上の「(((;゚Д゚)))ガクガクブルブル」にマウスカーソルをもっていってみてね♪
こんな感じとかさ!いや知らんけど

ということで、最近記事さぼって書いてないからガクブル記事を書きました٩( ‘ω’ )و

関連記事