ホームページ > 記事 > ウェブフロントエンド > CSS3画像ジッター効果
CSS3画像ジッター効果
- 高洛峰オリジナル
- 2017-02-09 16:22:043698ブラウズ
@-moz-keyframes tada{
0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}}
.doudun:hover{
-webkit-animation: tada 1s .2s ease both;
-moz-animation: tada 1s .2s ease both;
}
CSS3 の画像やジッター効果関連の記事をもっと知りたい場合は、PHP 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS の中心的な概念次の記事：CSS の中心的な概念