ホームページ >ウェブフロントエンド >CSSチュートリアル >css3はアニメーション属性を使用して、背景色の動的グラデーションの効果を実現します（コードが添付されています）

css3はアニメーション属性を使用して、背景色の動的グラデーションの効果を実現します（コードが添付されています）

不言オリジナル: 2018-11-08 10:50:5321492ブラウズ

Web サイトの背景色が比較的単一である場合、十分に美しく見えません。では、背景色を変更できるようにするにはどうすればよいでしょうか。この記事では、CSS3アニメーションを使って背景色を徐々に変化させたり、色の組み合わせや順序を調整したり、より目を引くカラーデザインにする方法を紹介します。

早速、具体的な内容を見ていきましょう (推奨コース: css3 ビデオチュートリアル )

まず、 を見てみましょう。 CSS3 キーフレームアニメーションの基本

#まずは要素が徐々に変化するアニメーションを理解することから始めましょう。 CSS 3のアニメーションプロパティではキーフレームを設定したり、細かい動きを描画したりできます。アニメーションや無限ループの時間やタイミングに関してはCSSのみで指定可能です！

キーフレームとは何ですか?

キーフレーム (パスポイント) は、アニメーションの変化を定義するフレームです。 @keyframes は、キーフレームごとに要素がどのように変化するかを定義します。アニメーションをそのキーフレームと一致させるには、@keyframes ルールの名前を、要素に指定されたアニメーション名属性の名前と一致させる必要があります。

@keyframes ルールの名前は、「@keyframes any name」として宣言されます。 0%から100%までのキーフレーム情報を書き込んでいきます。 0% はアニメーションの開始時間を示し、100% は終了時間を示します。 0% from、100% は to に置き換えることができます。以下の例は、背景色を赤、オレンジ、ピンクに変更するキーフレームです。

@keyframes name {
  0% { background: red; }
  50% { background: orange; }
  100% { background: pink; }
}

注: Chrome や Safari などの WebKit ブラウザの場合は、ベンダープレフィックス (-webkit-) が必要です。表記どおり「 -webkit-keyframes 」と書き、@とキーフレームの間に -webkit- を書きます。

アニメーション関連プロパティ

animation-name (アニメーション名)

@keyframes 仕様で定義された名前。これを指定しない場合、アニメーションは実行されません。また、指定したアニメーション名がどのキーフレームにも一致しない場合、そのキーフレームは実行されません。

animation-duration (アニメーション継続時間)

アニメーションを実行する時間を「秒」で指定します。たとえば、「5 秒」は 5 秒間続きます。 0の場合は実行されません。負の値を指定しても0として扱われます。

animation-timing-function (アニメーションタイミング関数)

アニメーションの時間と継続方法を指定します。アニメーションの進行速度をスケーリングすることで滑らかな動きを表現できます。

イーズ (初期値)

イーズイン

イーズアウト

イーズインアウト

リニア

animation-lay(アニメーション遅延)

要素を読み込む際に、「要素番号s」からの「アニメーション開始」時間を指定します。たとえば、「5 秒」は 5 秒間続きます。初期値 0 を指定すると、すぐに実行されます。

animation-iteration-count (アニメーションの繰り返し回数)

アニメーションを繰り返す回数を数値で指定します。無限ループを指定する場合は、infinite を指定します。

animation-direction

繰り返しアニメーションの方向を指定します。

normal...通常方向に再生(初期値)

alternate...通常時と偶数時に奇数回を逆方向に再生(往復…)

reverse...逆方向に再生

alternate-reverse...逆方向に再生

animation-play-state(アニメーション再生状態)

アニメーションの一時停止(一時停止)と再生(実行中)を指定します。ただし、あまり使われていないようです。

animation-fill-mode (アニメーションフィルモード)

アニメーション再生前後の状態を指定します。

none (デフォルト)

forwards..再生後に最後のキーフレームの状態を保持します

backwards..再生前に最初のキーフレームの状態を適用します

両方 ... 前方 ...前方と後方の両方に適用されます

プロパティの概要

アニメーションプロパティを使用すると、スペースで区切って個別に属性値を指定できます。項目は省略可能ですが、実行前にアニメーション名を記述する必要があります。次の順序でリストすることをお勧めします。

animation-name (アニメーション名)

animation-duration (アニメーション継続時間)

animation-timing-function (アニメーションタイミング関数)

animation - late (アニメーション遅延)

animation-iteration-count (アニメーション反復回数)

animation-direction (アニメーション方向)

animation-fill-mode (アニメーションフィルモード)

animation-play-state (アニメーションの再生状態)

body {
  animation: test 5s ease 1s infinite forwards;
}

背景色の変更の具体的な内容を見てみましょう

# 基礎知識を理解した上で、具体的な実装方法を詳しく見ていきましょう。まず、キーフレームの名前を「bg - color」に設定し、背景色を0から100%までのトランジションに設定します。同じ色を0%と100%に設定するとアニメーションをループさせながら滑らかに動きます。 Webkit ベースのブラウザで有効にするバージョンについても説明します。

@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

今回はWebページ全体の背景色を指定するので、本文はアニメーション属性で指定します。値は「キーフレーム名」、bg-color「変更」は10秒で追加、「,10s」は無限ループを指定します。 Webkit のバージョンを忘れないでください。背景色を使用すると、アニメーションが機能しない状況に備えて、背景色として基本の背景色を指定できます。

body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}

完全なコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
p {
  font-family: Meiryo, "Hiragino Kaku Gothic Pro W3",sans-serif;
  text-align: center;
  margin-top: 150px;
  color: #fff;
}
</style>
</head>
<body>
<p>php中文网</p>
</body>
</html>

效果如下：

css3はアニメーション属性を使用して、背景色の動的グラデーションの効果を実現します（コードが添付されています）

以上がcss3はアニメーション属性を使用して、背景色の動的グラデーションの効果を実現します（コードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：CSSで立体的な立体回転・無限カルーセルアニメーションを実現（コード例）次の記事：CSSで立体的な立体回転・無限カルーセルアニメーションを実現（コード例）

続きを見る