ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS アニメーションガイド: 飛行効果を作成する方法を段階的に説明します。

CSS アニメーションガイド: 飛行効果を作成する方法を段階的に説明します。

王林オリジナル: 2023-10-19 10:41:081170ブラウズ

CSS アニメーションガイド: 飛行特殊効果を作成する方法を段階的に説明します。

はじめに: CSS (Cascading Style Sheets) は Web デザインにおいて非常に重要なテクノロジーです。を使用して、Web ページのスタイルとレイアウトを設定できます。さまざまなエフェクトの中でも飛行エフェクトは非常に人気があります。この記事では、CSS を使用して飛行効果を作成する方法を段階的に説明し、具体的なコード例を示します。

1. HTML 構造の作成

まず、飛行エフェクトに対応する HTML 構造を作成する必要があります。以下は HTML 構造のサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>飞翔特效</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="bird"></div>
  </body>
</html>

Set the のタグに styles.css という名前のスタイルシートファイルを導入しました。飛行エフェクトのスタイル。

2. CSS スタイルの追加

次に、飛行効果を作成するために CSS スタイルを追加する必要があります。 styles.css ファイルでは、次のコードを使用できます。

.bird {
  width: 100px;
  height: 100px;
  background-color: #FFD700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fly 4s infinite;
}

@keyframes fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

上記のコードでは、最初にクラス .bird# の要素の幅と高さを設定します。 ## を選択し、背景色を設定します。要素を中央に配置するには、position:Absolute; を使用します。

transform 属性を使用して、要素の変位と回転の状態を設定します。 translate(-50%, -50%)要素を水平方向と垂直方向に左と上に 50% 移動して中央に配置します。

次に、

fly というキーフレームアニメーションを作成しました。 0% では、要素は変化していません。 50% では、要素は右に 180 度回転しています。 100% では、要素は戻りました元の位置に戻します。このアニメーション効果はループし、4 秒間持続します。

3. 結果のデモンストレーション

上記の操作を完了した後、ブラウザで HTML ファイルを開き、鳥が飛んでいる特殊効果を確認できます。

概要:

この記事では、CSS を使用して飛行効果を作成する方法を学びました。まず特殊効果を表示するための HTML 構造を作成し、次に CSS を使用して要素の位置やアニメーションなどの関連スタイルを設定しました。最後に、ブラウザで HTML ファイルを開くと、美しい飛行効果を観察できます。

この記事のガイダンスを通じて、CSS を使用して飛行特殊効果を作成する方法を学び、さらにそれを独自の Web デザインに適用できることを願っています。

以上がCSS アニメーションガイド: 飛行効果を作成する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html 循环样式表 position transform

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS を使用して Web ページのスムーズなスクロールナビゲーションを実現する方法次の記事：CSS を使用して Web ページのスムーズなスクロールナビゲーションを実現する方法

続きを見る

CSS アニメーション ガイド: 飛行効果を作成する方法を段階的に説明します。

関連記事

CSS アニメーションガイド: 飛行効果を作成する方法を段階的に説明します。