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

CSS アニメーションガイド: ストリーマー効果の作成方法を段階的に説明します。

PHPz

リリース： 2023-10-21 09:00:11

オリジナル

1853 人が閲覧しました

CSS アニメーションガイド: ストリーマー効果の作成方法を段階的に説明します。

CSS アニメーションガイド: ストリーマーエフェクトの作成方法を段階的に説明します

CSS アニメーションは現代の Web デザインに不可欠な部分であり、Web デザインに鮮やかさと活力を加えることができます。ウェブページ。一般的な特殊効果の 1 つは、要素が輝いているように見えるストリーマー効果で、非常に目を引きます。この記事では、ストリーマーエフェクトを作成する方法を段階的に説明し、具体的なコード例を示します。

まず、アニメーション効果を含める HTML ファイルが必要です。コードエディターで新しいファイルを作成し、次のコンテンツを追加します。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="glow-effect"></div>
</body>
</html>

ログイン後にコピー

上記のコードでは、styles.css という名前の CSS ファイルを導入し、# A に次のコンテンツを追加しました。 glow-effect クラスの div 要素が ##body タグに追加されます。ストリーマー効果は、この div 要素に適用されます。

次に、ストリーマー効果を実装するための CSS コードを

styles.css ファイルに記述する必要があります。コードエディターで新しいファイルを作成し、次の内容を追加します。

.glow-effect {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
    animation: glowing 2s infinite;
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 5px #ff0000, 0 0 20px #ff0000;
    }
    50% {
        box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
    }
    100% {
        box-shadow: 0 0 5px #ff0000, 0 0 20px #ff0000;
    }
}

ログイン後にコピー

上記のコードでは、まず、クラス名

.glow-effect を持つ CSS セレクターを定義します。このセレクターは div 要素で使用されます。幅と高さを 200 ピクセルに設定し、線形グラデーションの背景色で塗りつぶします。 background プロパティの色の値を変更することで、ストリーマの色を変更できます。

次に、

animation 属性を使用して、glowing というアニメーションを要素に追加しました。このアニメーションは 2 秒間続き、無限ループで再生されます。

次に、

@keyframes キーワードを使用して、glowing という名前のアニメーションシーケンスを定義します。このアニメーションシーケンスには、0%、50%、100% の 3 つのキーフレームが含まれています。各キーフレームで、ストリーマー効果の作成に使用される box-shadow プロパティを設定します。これらのプロパティの値を変更することで、ストリーマのサイズと位置を調整できます。

ファイルを保存し、ブラウザで HTML ファイルを開くと、ストリーマ効果のある正方形の要素が表示されます。点滅と光り続けます。

概要:

この記事では、ストリーマー効果を備えた CSS アニメーションを作成する方法を段階的に説明します。
linear-gradient プロパティを設定して要素の背景色を定義し、box-shadow プロパティを使用してストリーマー効果を作成しました。アニメーションシーケンスは、@keyframes キーワードを使用して定義され、animation 属性を使用して要素に適用されます。コード内の値を調整して、ニーズに応じて独自のストリーマー効果をカスタマイズできます。

CSS アニメーションをサポートするブラウザのバージョンは異なる場合があるので、ご注意ください。お使いのブラウザが CSS アニメーション機能をサポートしていることを確認してください。

この記事が CSS アニメーションの理解と使用に役立つことを願っています。 Web デザインで魅力的なストリーマー効果を作成したいと考えています。

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