外部ライブラリを使用せずに CSS で滑らかなグラデーションの背景アニメーションを作成するにはどうすればよいですか?
CSS を使用してグラデーションの背景をスムーズにアニメーション化する
途切れ途切れのグラデーション アニメーションで問題が発生し、滑らかに移行せずに突然変化する場合は、この記事を参照してください。のような外部ライブラリに依存せずにソリューションを提供します。 jQuery.
アニメーションの課題
グラデーション アニメーションを扱う場合、複数の色の間でスムーズな遷移を実現するのが難しい場合があります。デフォルトのアニメーション動作は多くの場合突然で、グラデーションがある位置から別の位置にジャンプします。
線形グラデーション背景
滑らかなグラデーション アニメーションを作成するには、次を使用します。線形グラデーションの背景を作成し、CSS アニメーションを使用して背景の位置を移動します。 CSS スタイルは次のようになります。
#gradient { /* Gradient background properties */ height: 300px; width: 300px; border: 1px solid black; font-size: 30px; background: linear-gradient( 130deg, #ff7e00, #ffffff, #5cff00 ); background-size: 200% 200%; /* Animation properties */ -webkit-animation: Animation 5s ease infinite; -moz-animation: Animation 5s ease infinite; animation: Animation 5s ease infinite; } @-webkit-keyframes Animation { 0% { background-position: 10% 0%; } 50% { background-position: 91% 100%; } 100% { background-position: 10% 0%; } } @-moz-keyframes Animation { 0% { background-position: 10% 0%; } 50% { background-position: 91% 100%; } 100% { background-position: 10% 0%; } } @keyframes Animation { 0% { background-position: 10% 0%; } 50% { background-position: 91% 100%; } 100% { background-position: 10% 0%; } }
HTML 実装
HTML では、div 要素を作成し、「gradient」クラスを適用する必要があります。 :
<div>
CSS アニメーションを使用して背景の位置を操作することで、流体を作成できますグラデーションアニメーション。このアプローチにより、突然のジャンプがなくなり、色間のスムーズで段階的な移行が実現します。
以上が外部ライブラリを使用せずに CSS で滑らかなグラデーションの背景アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

フロントエンド開発でWindowsのような実装方法...

タータンは、スコットランド、特にファッショナブルなキルトに通常関連する模様のある布です。 Tartanify.comでは、5,000を超えるTartanを集めました
