CSS3で背景画像に動的な色の変化効果を追加する方法

前回の記事「CSS3を使ってかっこいい三角形の背景画像を作る」では、かっこいい三角形の背景画像を作成する方法を紹介しましたので、興味のある方はぜひ参考にしてみてください。 ~

次の記事では、クールな背景画像を作成する方法と、CSS3 を使用して色の変化する背景画像アニメーションを作成し、Web ページをより魅力的にする方法を紹介します。

最初にレンダリングを見てみましょう

この効果を実現する方法を検討してみましょう:

まず最初に、タグを作成せず、本文タグに背景画像を直接設定します。

body {
   background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

画像の色を変更するにはどうすればよいですか?これには、背景画像上のオーバーレイとしてカラー レイヤーを追加する必要があります。これは、linear-gradient() 関数を使用して実現できます:

background-image: 
           linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
   url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");

これはまだ静的ですこのときの効果、色が常に変化するダイナミックな効果を実現するにはどうすればよいですか? @keyframes とアニメーション属性を使用して、アニメーション効果を追加することができます:

• アニメーション属性を使用して、アニメーション名、再生時間、再生時間などを設定します:
  

body {
  background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

animation-name: セレクターにバインドされるキーフレームの名前を指定します。

animation-duration: アニメーションにかかる秒数またはミリ秒数を指定します。 complete

animation-timing-function: アニメーションがサイクルを完了する方法を設定します。

#animation-delay: アニメーションが開始する前の遅延間隔を設定します。

animation-iteration-count: アニメーションが再生される回数を定義します。

animation-direction: アニメーションを逆方向に順番に再生するかどうかを指定します。

animation-fill-mode: アニメーションが再生されないとき (アニメーションが完了したとき、またはアニメーションの再生開始までに遅延があるとき) に要素に適用するスタイルを指定します。

animation-play-state: アニメーションが実行中か一時停止かを指定します。

• @keyframes を使用してアニメーションの各フレームを定義します:

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), 
		url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
		 url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
}

完全なコードを以下に示します:

PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。皆さんも「

css ビデオ チュートリアル 」を学習してください。

以上がCSS3で背景画像に動的な色の変化効果を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。