前端 day16

一 浏览器前缀

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

    2   webkit      谷歌、苹果 浏览器前缀

         moz        火狐浏览器前缀

         ms         IE浏览器前缀

         o           欧鹏浏览器

         注：添加浏览器前缀     兼容模式

                不添加浏览器前缀   标准模式

二 渐变

     渐变：背景色在多个颜色之间平稳的过度。

     1 线性渐变：从一个方向到另一个方向的颜色变化。

       （1）标准模式的语法（不添加浏览器前缀）：

                background:linear-gradient(direction,color-stop1,color-stop2,。。。);

                说明：

                        A：direction：默认的to bottom，即从上向下的渐变；

                       B：stop：颜色的分布位置，默认均匀分布，例如有三个颜色，各个颜色的stop均为33.33%；

        （2）兼容模式的语法（添加浏览器前缀）：

                  background:linear-gradient(direction,color-stop1,color-stop2,。。。);

                  说明：

                 

                          A：direction不能添加to；

                          B：默认的是从哪个方向开始。

      2 径向渐变(从一个点到四周的颜色的过度变化)：

             语法（必须加浏览器前缀）：

             background:radial-gradient(center,shape,size,start-color,….last-color)；

             说明：

              center：渐变起点的位置，可以是百分比，默认是图形的正中心；

              shape：渐变的形状，ellipes表示椭圆形，circle表示圆形，默认为ellipsis，如果元素形状为正方形的元素，则ellipsis和                              circle显示一样。

              size：(关于径向渐变的大小)渐变的大小，即渐变到哪里停止，它有四个值。

                        closest-corner：最远角。

                       farthest-side：最远边

                       closest-corner：最远角

                       farther-corner：最远角。  

三 重复性渐变

       1 重复性线性渐变

           background:repeating-linear-gradient();

       2 重复性径向渐变

          background:repeat-radial-gradient();

四  渐变方向：

  （1）to left / to right / to top /to bottom

  （2）对角渐变

       to left top/ to right top / to left bottom /to right bottom

  （3）渐变线角度的变化

       例如：标准模式：40deg   (40度)

             兼容模式：50deg  (90减40)

五 线性渐变颜色的分布

     linear-gradient（方向，颜色1 20% ，颜色2 30% 颜色3）

     到20%这个位置仍是颜色1，过了20%，开始向颜色2渐变。

六  过渡

       1 transition-property 检索或设置对象中的参与过渡的属性

       2 transition-duration 检索或设置对象过渡的持续时间

       3 transition-delay    检索或设置对象延迟过渡的时间

       4 transition-timing-function 检索或设置对象过渡的动画类型

       5 动画的运动类型：

                 默认的不是匀速，默认的是ease。

       6 简写属性：

                 tansition：过渡的属性(all)过渡的时间 延迟时间 动画的类型（linea匀速）。

                 注：transition 必须通过事件触发！（鼠标滑过）改变css属性的值。

七 过渡案例

  （1）360导航                     

  （2）手风琴

  （3）我不是随便的人          

  （4）透明属性