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