渐变以及过渡笔记

笔记：
css3渐变: 由浏览器生成的

        线性渐变:
        background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n);
        background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n);
         
        1 单一方向渐变: 
            left 从左边开始
            right 从右边开始
            top 从上边开始
            bottom   从底部开始
            注意: 需要添加兼容前缀
             
            to left 到左边(结束位置)
            to right 到右边
            to top  到顶部
            to bottom 到底部
            注意: 不要添加兼容前缀
         
        2 对角渐变:
            left top    左上开始
            left bottom 左下开始
            right top   右上开始
            注意: 带兼容前缀
             
            to left top 到左上(结束位置)
            注意: 不带兼容前缀
             
        3 角度的渐变
            10deg   10度
             
        4 默认情况下颜色趋于均分
            可以指定颜色分布的百分比,让颜色按照百分比进行渐变
            blue 10%    到10% 都是蓝色
            red 10px    到10px都是红色

径向渐变:(一定要加浏览器前缀)
从一个点到四周的渐变

            background:-webkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3);
            渐变位置: 默认从中心到四周
                left    从左边到四周的渐变
                right
                top
                bottom
                 
                left top    从左上角到四周的渐变
                left bottom 
                right top
                ...
                 
                10px 30px   距离左边10px 距离上边30px
                 
            形状:
                默认椭圆    ellipse
                正圆      circle
                注意: 元素是正方形,则都是正圆
                 
            大小:
            size：渐变的大小，即渐变到哪里停止，它有四个值。 
                closest-side：最近边； 
                farthest-side：最远边； 
                closest-corner：最近角； 
                farthest-corner：最远角。

过渡: 让元素的动画发生平滑的效果,而不是生硬直接的效果
1: 什么属性在做动画 transition-property:属性1,属性2,属性3,…属性n;
2: 过渡时间需要多久 transition-duration:2s;
3: 等待时间(可选) transition-delay:3s;
4: 动画类型 (不写) transition-timing-function:;
5: 综合写法 transition: 过渡属性 过渡时间 延迟时间 运动类型;