CSS3で文字をぶるぶる震わす! / ブルブルメーカー

CSS3で文字をぶるぶる震わす! / ブルブルメーカー
CSS3を使って、文字をぶるぶる震わすメモです。
こちらは、CSS3の@keyframesを使ったアニメーション処理になります。

以下のソースをコピペすることで、CLASS「buru2」の要素がぶるぶる震えます。
デモではDIV要素ですが、IMGのCLASS指定を行なえば、画像がぶるぶる震えます。強調するときにいかがですか。


□ HTMLソール
<div class="buru2">ブルブル</div>



□ CSSソース
.buru2 {
display:inline-block;
animation-name:buru2Setting2;
animation-iteration-count:infinite;
animation-duration:0.2s;
margin:10px;
}
@keyframes buru2Setting2 {
0% {transform:translate(0px, 0px) rotateZ(0deg)}
25% {transform:translate(2px, 2px) rotateZ(3deg)}
75% {transform:translate(0px, 3px) rotateZ(0deg)}
50% {transform:translate(1px, 0px) rotateZ(-3deg)}
100% {transform:translate(0px, 0px) rotateZ(0deg)}
}



□ もう少し派手に動かしたい。
「rotateZ」の値を変えると動きが派手になります。そこで、コピペしやすい物を作ってみました。スライダーを左右にずらすと、震える動きが確認出来るほか、ソースのコピペが出来るようになっています。

※ jQueryは利用していません。CSS3だけで実現しています。古いブラウザや一部IEでは動かない場合がございます。ご了承ください。



□ 関連記事
background-image で比率を維持しながらレスポンシブ表示させる。
Facebook のソーシャルカウント数を取得する
大量のファイルを tar したい時のメモ
さくらインターネットの.mailfilterを使って、件名が英数字、記号のスパムに対策をしました。
パラメータ付URLを.htaccessでリダイレクトするメモ
[Add-on Stylish] Web版Twitterのタイムラインに表示される画像、プロモーションの表示を設定するStylishのCSS (暫定)
画像をクリックするとその場で拡大表示するようにしました。
[Add-on Stylish] Twitterが更新されていたので、プロモ、お勧めフォロワ、画像などを表示させない様にする。 [2015/10/28 更新]
2016.10.04

コメント投稿フォーム