ホームページ > 記事 > ウェブフロントエンド > CSS アニメーション ガイド: 連続的なローリング効果を作成する方法を段階的に説明します。
CSS アニメーション ガイド: 連続的なローリング効果を作成する方法を段階的に説明します。
- PHPzオリジナル
- 2023-10-21 08:41:081406ブラウズ
CSS アニメーション ガイド: 連続ローリング特殊効果を作成する方法を段階的に説明します
Web デザインと開発において、アニメーション効果は重要な要素の 1 つです。ユーザーエクスペリエンスを向上させます。 CSS アニメーションは、さまざまな動的な効果を実現する一般的な方法の 1 つです。この記事では、連続ローリング効果を備えた CSS アニメーションを作成する方法を段階的に説明し、具体的なコード例を通じて各ステップの実装プロセスを詳しく紹介します。
まず、HTML ファイルと関連する CSS スタイル シートが必要です。
HTML ファイルの構造は次のとおりです:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box" id="box"></div> </body> </html>
次に、CSS スタイル シートで関連するスタイルを定義する必要があります。
CSS スタイル シートは次のとおりです:
.box {
width: 100px;
height: 100px;
background-color: red;
}次に、@keyframes ルールを使用してアニメーション効果を定義します。 @keyframes ルールはアニメーションの作成に使用されます。キーフレームの特定の割合でさまざまなスタイルを定義すると、ブラウザはそれらのスタイルの変化をアニメーション化します。
@keyframes ルールを CSS スタイル シートに追加します:
@keyframes roll {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}次に、アニメーションを .box 要素に適用します。これは、アニメーション属性を使用して実現できます。
CSS スタイル シートの .box スタイルを変更します:
.box {
width: 100px;
height: 100px;
background-color: red;
animation: roll 2s linear infinite;
}最後に、JavaScript を使用してアニメーションの開始と一時停止を制御する必要があります。
次の JavaScript コードを HTML ファイルの先頭に追加します。
<script>
var box = document.getElementById("box");
box.addEventListener("click", function() {
if (box.style.animationPlayState === "paused") {
box.style.animationPlayState = "running";
} else {
box.style.animationPlayState = "paused";
}
});
</script>これまでで、連続ローリング効果の CSS アニメーションが完成しました。ユーザーは .box 要素をクリックしてアニメーションの一時停止と開始を制御できます。
概要:
この記事の導入と具体的なコード例を通じて、CSS アニメーションを使用して連続的なローリング効果を作成する方法を学びました。わずか数行の CSS コードといくつかの JavaScript コントロールを使用するだけで、魅力的な動的な効果を実現できます。この記事がお役に立てば幸いです。アニメーション効果の実装が成功することを祈っています。
以上がCSS アニメーション ガイド: 連続的なローリング効果を作成する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。