ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3でトランジショングラデーション効果を作成する方法
CSS3でトランジショングラデーション効果を作成する方法
- php中世界最好的语言オリジナル
- 2017-11-24 10:46:292611ブラウズ
CSS3 にトランジション グラデーション効果があることは誰もが知っているので、今回はトランジション グラデーションの使用方法とその使用スキルを共有します。ここでは小さな例を示します。
CSS3 グラデーションを使用すると、2 つ以上の指定した色の間で滑らかな遷移を表示できます。
-webkit-gradient(グラデーションの種類、開始点、終了点、[開始色、終了色、遷移色])
·線形グラデーション (Linear Gradients) - 下/上/左/右/斜め变 · 放射状グラデーション-中心の定義によって定義します
Linear-Gradient (color 1, color 2)
Linear-Gradient use : -webkit-radial-gradient(red, green, blue);
色はパーセンテージに従って分配されます
背景: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
ケースリスト:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
#dv{
border:1px solid #000;
width:150px;
height:150px;
/*background: -webkit-radial-gradient(red, green, blue);
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);*/
background: -webkit-radial-gradient( red, yellow, green);
}
</style>
<body>
<div id="dv">
</div>
</div>
</body>
</html>トランジショングラデーションを使用する方法はたくさんあります。さらに興味深い情報については、php 中国語に注目してください。ウェブサイトその他関連記事!
関連書籍:
HTMLの絶対パスと相対パスの使い方 HTMLテキストを縦方向に表示する方法以上がCSS3でトランジショングラデーション効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。