CSS アニメーションガイド: 連続的なローリング効果を作成する方法を段階的に説明します。-CSSチュートリアル-php.cn

CSS アニメーションガイド: 連続的なローリング効果を作成する方法を段階的に説明します。

PHPz

リリース： 2023-10-21 08:41:08

オリジナル

1481 人が閲覧しました

CSS アニメーションガイド: 連続的なローリング効果を作成する方法を段階的に説明します。

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 サイトの他の関連記事を参照してください。