CSS では、background 属性と「linear-gradient()」関数を使用して、要素の色が左から右に変化する効果を実現できます。「background:linear-gradient」を追加するだけで済みます。 (右、白) 要素へ。、青)」スタイルで十分です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 で要素の色が左から右に変化する効果を実現する方法
background 属性と Linear-gradient を使用できますCSS の () 関数 色が左から右に変化することを実現するには、要素の背景スタイルを設定するために
background 属性を使用します。要素の線形グラデーションであり、2 つの表現または複数色の線形グラデーションの画像を作成するために使用されます。
線形グラデーションを作成するには、2 つの色を指定する必要があります。さまざまな方向 (角度として指定) でグラデーション効果を実現することもできます。方向が指定されていない場合、グラデーションはデフォルトで上から下に設定されます。
例を通して見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to right, white , blue);
}
</style>
</head>
<body>
<h3 id="线性渐变-nbsp-nbsp-从左到右">线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是白色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
</body>
</html>出力結果:
(学習ビデオ共有: CSS ビデオ チュートリアル )
以上がCSS3で要素の色が左から右に変化する効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
クリップパスでアニメーション化しますApr 19, 2025 am 09:52 AMClip-Pathは、私たちが一般的に知っているCSSプロパティの1つですが、何らかの理由で頻繁に手を伸ばすことはできません。その意味では少し怖いです
GatsbyでGraphQLプレイグラウンドを使用しますApr 19, 2025 am 09:51 AM私はあなたのほとんどがすでにギャツビーについて聞いていると仮定しており、少なくともそれが基本的に反応サイトの静的サイトジェネレーターであることを大まかに知っています。一般的に
タイプまたはテスト：両方ではないのはなぜですか？Apr 19, 2025 am 09:50 AM時々、議論は型付けされたJavaScriptの価値について燃え上がります。 「もっとテストを書くだけです！」対戦相手を叫ぶ。 「ユニットテストをタイプに置き換えてください！」
自分の怠zyなロードを転がすためのヒントApr 19, 2025 am 09:44 AM「怠zyな読み込みを使用できる」と聞いたことがあるかもしれません（または電話を発行しました！特に重いウェブページをスリムにする方法を探しているとき。
CSS 2019調査の3つの予測Apr 19, 2025 am 09:43 AMCSS状態のような開発者調査を実行することは、マルチステージプロセスです。まず、データを収集する必要があります。次に、使用可能な形状に処理します。
最後に...最終的に約束の投稿Apr 19, 2025 am 09:39 AM「JavaScriptの約束で最終的に発砲するのはいつですか？」これは私が最近のワークショップで尋ねられた質問であり、私は何かをクリアするために少し投稿を書くと思いました
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
