ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています)
CSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています)
- 坏嘻嘻オリジナル
- 2018-09-25 10:58:4230616ブラウズ
現在の Web 開発プロセスでは、人間とコンピューターのインタラクションとユーザー エクスペリエンスにより多くの注意が払われており、それは Web ページの色の多様化に最も直感的に反映されています。この記事の内容は、CSS3 を使用してカラーの線形グラデーション属性を実現する方法についてです。必要な方は参考にしていただければ幸いです。
マニュアルの推奨事項: css 学習マニュアル
線形グラデーションを実現するための css3 の使用の概要
css3 では、線形グラデーションと放射状グラデーションの 2 種類のグラデーションが定義されています。線形グラデーションは、2 つ以上の色の間で滑らかな遷移を示すアニメーション効果を指します。この効果を実現するには、通常、グラデーションの方向に従って上から下、右に分割します。左および斜め方向。デフォルトの方向は上から下です。
css3 を使用して線形グラデーションを実装する原理
css3 で 2 つのカラー ノードを定義する必要があります。これらの 2 つの色は、色のスムーズな遷移のために、1 つのカラー ノードが開始点となり、もう 1 つのカラー ノードが終了点になります。背景の使用方法を説明するために div 背景を例に挙げます。 ); 構文。
#css3 を使用して線形グラデーションを実装するコード
タイプ 1: グラデーションの方向は上から下です
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变(gradients)属性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
background: -mos-linear-gradient(red,blue);
background: linear-gradient(red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>#効果を実現
タイプ 2: グラデーションの方向は右から左のグラデーションです
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变(gradients)属性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(right,red,blue);
background: -o-linear-gradient(right,red,blue);
background: -moz-linear-gradient(right,red,blue);
background: -mos-linear-gradient(right,red,blue);
background: linear-gradient(right,red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>効果を実現する
##タイプ 3: グラデーションの方向は右下隅から左上です。コーナー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变(gradients)属性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(left bottom,red,blue);
background: -o-linear-gradient(left bottom,red,blue);
background: -mos-linear-gradient(left bottom,red,blue);
background: -moz-linear-gradient(left bottom,red,blue);
background: linear-gradient(left bottom,red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>結果を出す
1.
2. CSS で複数の色のグラデーションを実現するためのヒント (コード付き)
3.使い方CSS3 グラデーションでテキストの色のグラデーションを実現しますか?
関連ビデオチュートリアル:
1.CSS ビデオチュートリアル - 翡翠少女般若心経編
以上がCSS3 のカラー線形グラデーション属性: 複数の色間のスムーズな移行 (完全なコードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。