(((；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
これ有名ですよね！
通称ガクブル！！
今回は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時に設定しといたら、なんか面白く使えそうだよね。
例えば・・・
ホンマに押すの・・・？
ねー？
ホンマ？
まじかああああああ！
上の「(((；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ」にマウスカーソルをもっていってみてね♪
こんな感じとかさ！いや知らんけど
ということで、最近記事さぼって書いてないからガクブル記事を書きました٩( ‘ω’ )و
