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 サイトの他の関連記事を参照してください。