day16 html2

day16の知識

 很多css3属性 最初的预览版没有形成最终的正式版,但是浏览器为了对这些新属性形成支持,主流浏览器提供属于自己的语法规则 “浏览器前缀”

-webkit-     谷歌、苹果 浏览器前缀
-moz-        火狐浏览器前缀
-ms-         IE浏览器前缀
-o-          欧鹏浏览器

注:
    添加浏览器前缀  ->   兼容模式
    不添加浏览器前缀 ->  标准模式

1.グラデーション?:背景が複数の色の間でスムーズに移行します

線形グラデーション:ある方向から別
方向への色の変化標準モードの構文(ブラウザー接頭辞を追加しない場合):
背景:線形グラデーション(方向、色停止1、色停止2など)
説明:方向:デフォルトは下にあります。つまり、上から下へのグラデーションの
ストップです。色の分布位置、デフォルトの分布列には3つの色、各色のストップは33.33%です。

兼容模式语法(添加浏览器后缀)
background:-webkit- linear-gradient(direction,color-stop1,color-stop2,等等)
说明:direction:不能添加to 默认指的哪 从那个方向开始  

渐变方向 to left\right\top\
对着角渐变  : to left top \ to right bottom
渐变角度的变化  列如:标准模式: 40deg(40度) 兼容模式 : (90-40=50度) 等于标准模式的40度
线性渐变:颜色的分布:
linear-gradient(方向,颜色1(20%)颜色2(30%)颜色3) 到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变

放射状グラデーション:1つのポイントから周囲への過度のグラデーション
構文:(ブラウザーのプレフィックスを追加する必要があります)
背景:—wedkit—linear-gradient(center、shape、size、...、last-color)

说明:center:渐变起点的位置,可以为百分比,默认是图形的正中心
      shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为cellpse,如果元素形状为正方形的元素,则ellispe和circle显示一样
      size:渐变的大小,即渐变到哪里停止,他有四个值。closest-side(最近边)farthest-side:(最远变)closest-side(最近角) farthes-corner:(最远角)

放射状グラデーションのサイズについて:
最も近い側の最も近い側の最も
遠い側の
最も近いコーナー
最も遠いコーナー最も遠いコーナー

繰り返し可能なグラデーション:
繰り返し可能な線形グラデーション:背景:繰り返し線形グラデーション();

 重复性径向渐变:background:repeating-radial-gradient();

第二に、過剰な
構文遷移プロパティ:検索または特性の変化に関与するオブジェクトセット
遷移期間:取得または遷移の対象期間設定
遷移遅延:取得または遷移する目標遅延時間を設定
遷移タイミング機能:検索またはオブジェクトの遷移のアニメーションタイプを設定します。
アニメーションのモーションタイプ:デフォルトは均一速度ではなく、デフォルトは容易です

省略形プロパティ:遷移:過度のプロパティ(すべて)過度の時間遅延時間アニメーションタイプ(線形平均速度)
注:cssプロパティを変更するには、イベント(マウスオーバー:ホバー)によって遷移をトリガーする必要があります

21件のオリジナル記事を公開しました 賞賛されました0 訪問283

おすすめ

転載: blog.csdn.net/jiatinghui/article/details/105302429