[前に書いた] Web 開発プロセス中に、ページの背景色にグラデーション効果が必要です. オンライン検索は、多くの場合、公式 Web サイトのように醜い色でいっぱいです, 特にいくつかのボタンといくつかの大きな背景色が実行できない場合.黄色、今日は私が仕事中にまとめたいくつかの美しいグラデーション効果と実装方法をリストするツール担当者になります。
関連する知識ポイント: CSS の美しいグラデーションの例、CSS の水平方向のグラデーション、CSS の放射状グラデーション、CSS グラデーション、美しいグラデーションの背景色、さまざまな美しいグラデーション効果図。
[ファンバン] ブロガーをサポートする人はファンバンを見ることができます。あなたがリストに載るのを待っています!
目次
効果のプレビュー
著作権表示: CSDN Blogger で最初に公開されたもの - 杖を持った視覚障害者のためのコードを学習します。不明な点がある場合は、メッセージを残してプライベート メッセージを送信してください。
1. CSS3グラデーションとは？
まず、グラデーションの文字通りの意味は徐々に変化することであり、背景色を設定するためによく使用されます。正式な用語は、2 つ以上の色の間をスムーズに移行することです。
その利点は、一部の背景色に良い効果を持たせたい場合に、PS で自分で画像を作成し、背景画像などを設定する必要がなく、CSS3 グラデーションの style 属性を使用して直接設定できることです (これにより、ページのリソース リクエストが削減されます。カラー システムを自由に調整できると便利だと思いませんか。
2. CSS3 グラデーションの種類
2.1 線形勾配 (linear-gradient)
2.1.1 原理説明
線形とは、グラデーション カラーがさまざまな方向で色のさまざまな表示効果を実現できることを意味し、上/下/左/右/斜めなどの複数の方向をサポートします。その中で、いろいろな色を加えることができるので、便宜上、
デフォルト属性(上から下): background-image: linear-gradient (#e66465, #9198e5);
set the direction (左から) の2 種類を使用しました。右へ): background-image: linear-gradient (右へ、#e66465、#9198e5);
斜め方向 (左上から右下へ): background-image: linear-gradient (右下へ、#e66465、#9198e5) );
角度を設定 (左から右へ): background-image: linear-gradient (45deg, #e66465, #9198e5);
素敵な線形グラデーション効果:
2.1.2 実装コード
実際には、他にも多くの効果があります. 私は意図的にすべての人が適用できるものを選択します. 具体的な実装コードのスタイルは次のとおりです:
X1: スタイル
background: linear-gradient(#e66465, #9198e5);
X2: スタイル
background: linear-gradient(to right, #9fe1fa, #f4edc9);
X3: スタイル
background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));
X4: スタイル
background: linear-gradient(111.4deg, rgb(238, 113, 113) 1%, rgb(246, 215, 148) 58%);
X5: スタイル
background: linear-gradient(102.7deg, rgb(253, 218, 255) 8.2%, rgb(223, 173, 252) 19.6%, rgb(173, 205, 252) 36.8%, rgb(173, 252, 244) 73.2%, rgb(202, 248, 208) 90.9%)
X6: スタイル
background: linear-gradient(58.2deg, rgba(40, 91, 212, 0.73) -3%, rgba(171, 53, 163, 0.45) 49.3%, rgba(255, 204, 112, 0.37) 97.7%)
X7: スタイル
background-image: linear-gradient(181.2deg, rgb(181, 239, 249) 10.5%, rgb(254, 254, 254) 86.8%);
X8: スタイル
background-image: linear-gradient(107.7deg, rgb(101, 168, 143) -30.7%, rgb(144, 220, 193) 7.2%, rgb(225, 203, 150) 31.3%, rgb(251, 166, 150) 82.6%, rgb(250, 54, 65) 128.5%);
X9: スタイル
background-image: linear-gradient(111.4deg, rgb(209, 231, 235) 7.4%, rgb(238, 219, 199) 51.4%, rgb(255, 159, 122) 82.6%, rgb(255, 109, 58) 100.2%);
X10: スタイル
background-image: linear-gradient(109.6deg, rgb(101, 58, 150) 29.9%, rgb(168, 141, 194) 99.9%);
X11: スタイル
background-image: linear-gradient(106.5deg, rgba(255, 215, 185, 0.91) 23%, rgba(223, 159, 247, 0.8) 93%);
X12: スタイル
background-image: linear-gradient(109.6deg, rgb(0, 51, 102) 11.2%, rgb(187, 187, 187) 91.1%);
X13: スタイル
background-image: linear-gradient(103.3deg, rgb(252, 225, 208) 30%, rgb(255, 173, 214) 55.7%, rgb(162, 186, 245) 81.8%);
X14: スタイル
background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
2.2 放射状グラデーション (radial-gradient)
2.2.1 放射状グラデーションとは?
CSS の放射状グラデーションはボックスのようなもので、特定の中心からグラデーションの色を設定したり、広げたり、別の形状にグラデーションの色を設定したりできます。また、背景色の放射として理解することもでき、そのプロパティ設定でグラデーションの中心と形状 (円
または楕円)、サイズ。通常、グラデーションの中心は center- [中心点を示す]、グラデーションの形状は ellipse- [楕円を示す]、グラデーションのサイズは farthest-corner [最も遠い隅を示す] です。 ]
2.2.2 CSS 構文
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| パラメータ | 意味 | デフォルト |
|---|---|---|
| 形 | 形状を定義する (円または楕円) | ellipse (楕円を表す) 注: コンテナーの幅と高さは等しくありません |
| サイズ | サイズを定義する | farthest-corner (最も遠いコーナーを示します) |
| 位置 | 円の中心の位置を定義します | center (中心点を示します) |
| 開始色 | 開始する色の値を定義します | 必須、デフォルトなし |
| … | 途中でさまざまな遷移色を定義できます | 必須ではありません。カラー マッチング要件を参照してください。 |
| 最後の色 | 終点のカラー値を定義します | 必須、デフォルトなし |
2.2.3 放射状グラデーションの一般的な例
実際には、色のマッチングは個人の好みに依存します. 主な適用方法は次のとおりです:
ピクセル位置設定: 背景:放射状グラデーション(978px at 1.8% 4%, rgb(162, 208, 254) 0.1%, rgba(193) , 94, 245 , 0.73) 100.2%)
形状位置設定: 背景:放射状グラデーション(円 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%)
具体的な実装は次のとおりです。
J1. スタイル
background: radial-gradient(178px at 1.8% 4%, rgb(162, 208, 254) 0.1%, rgba(193, 94, 245, 0.73)100.2%)
J2. スタイル
background: radial-gradient(128px at 31.7% 40.2%, rgb(225, 200, 239) 21.4%, rgb(163, 225, 233) 57.1%)
J3.スタイル
background: radial-gradient(169px at -2.9% 12.9%, rgb(247, 234, 163) 0%, rgba(236, 180, 238, 0.56) 46.4%, rgb(163, 203, 247) 100.7%)
J4.スタイル
background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%)
J5.スタイル
background: radial-gradient(circle at 32.2% 83.5%, rgb(239, 167, 167) 0%, rgb(215, 123, 191) 90%)
J6.スタイル
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, rgb(8, 70, 218) 90%);
J7.スタイル
background-image: radial-gradient(circle at 10.6% 23.3%, rgb(186, 162, 252) 0%, rgb(176, 248, 242) 72.4%);
J8.スタイル
background-image: radial-gradient(circle at 10% 20%, rgb(249, 57, 170) 9.8%, rgb(134, 176, 255) 94.9%);
J9.スタイル
background-image: radial-gradient(circle at 48.7% 44.3%, rgb(30, 144, 231) 0%, rgb(56, 113, 209) 22.9%, rgb(38, 76, 140) 76.7%, rgb(31, 63, 116) 100.2%);
J10.スタイル
background-image: radial-gradient(circle at 10% 20%, rgb(222, 168, 248) 0%, rgb(168, 222, 248) 21.8%, rgb(189, 250, 205) 35.6%, rgb(243, 250, 189) 52.9%, rgb(250, 227, 189) 66.8%, rgb(248, 172, 172) 90%, rgb(254, 211, 252) 99.7%);
著作権表示: CSDN Blogger で最初に公開されたもの - 杖を持った視覚障害者のためのコードを学習します。不明な点がある場合は、メッセージを残してプライベート メッセージを送信してください。
3. CSS3 グラデーションの完全な例
3.1 百度ネットディスク
リンク：https://pan.baidu.com/s/1RX5qX9GdJ1w2ML0W333dJg
抽出コード：hdd6
3.2 123 クラウドディスク
リンク：https://www.123pan.com/s/ZxkUVv-0OJ4.html
抽出コード：hdd6
3.3 エンドクレジットのイースターエッグ
傑作を作成することに専念して、あなたの混乱を解決したいと思います. 運が良ければ、リストに載って助けてくれることを願っています. どうもありがとうございました!
黄邦の入口はこちら
2023年、一緒に行きましょう！! !