ガクブルをCSSで表現してみた

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

ガクブルをCSSで表現する

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

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

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

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

.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)}
}

するとこんな感じ!

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました