ホームページ > 記事 > ウェブフロントエンド > CSS アニメーション チュートリアル: 振動効果を実装する方法を段階的に説明します。
CSS アニメーション チュートリアル: 振動効果の実装方法を段階的に説明します。具体的なコード例が必要です。
現代の Web 開発では、アニメーションが使用されます。エフェクトの使用が増え、より広範囲になります。 CSS アニメーションは、アニメーション効果を実現するシンプルかつ強力な方法です。この記事は、CSS アニメーションを使用して振動効果を実現する方法を学習し、具体的なコード例を提供するのに役立ちます。
3. 具体的なコード例
HTML コード:
<div class="shake-element"></div>
CSS コード:
.shake-element { width: 100px; height: 100px; background-color: red; animation: shake 1s infinite; } @keyframes shake { 0% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-10px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } }
上記のコードでは、クラス「shake-element」の div 要素を定義し、それに「shake」という名前のアニメーションを追加します。持続時間は 1 秒で、無限ループ再生されます。 @keyframes では、各キーフレームを 0% から 100% まで定義し、transform 属性のtranslateX メソッドを通じて要素の水平方向の変位を設定して、振動効果を実現します。
振動効果の振幅または周波数を調整したい場合は、@keyframes 内のキーフレームの割合と変換属性の値を調整できます。たとえば、translateX のディスプレイスメント値を増減すると振動の振幅が変更され、キーフレームの間隔のパーセンテージを増減すると振動の周波数が変更されます。
最近のブラウザのほとんどは、CSS アニメーションを適切にサポートしています。さまざまなブラウザでテストして、さまざまなプラットフォームやデバイスで正しく動作することを確認できます。
以上がCSS アニメーション チュートリアル: 振動効果を実装する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。