渐变的认识

一、渐变概念

        1. 可以在 2 个或者多个颜⾊之间显示平稳的过渡。

        2. 渐变是由浏览器⽣成的，因⽽需要写浏览器前。

二、渐变的分类之线性渐变

          线性渐变就是从一个方向到另一个方向的变化

写法一：不见前缀的写法：

        语法：background:linear-gradient(⽅向,颜⾊1,颜⾊2,颜⾊3,。。。) ;

        从左到右从红到绿的渐变：background:linear-gradient(to right,red,green); ⽅向：to是到的意思 ⽅向不写默认是从上到下的⼀个渐变

        to right====从左到右

        to left====从右到左

        to bottom===从上到下

        to top====从下到上

        to right bottom====从左上到右下

写法二：加前缀的写法

        如果写渐变的时候加了浏览器前缀了，那么在写⽅向的时候就不能写to 了。

        语法：background:-webkit-linear-gradient(left,red,green); 这是⼀个从左到右从红到绿的意⻅线性渐变。

        ⽅向：不写to 就是从的意思

        left===从左到右

        right===从右到左

        top====从上到下

        bottom===从下到上

注意：⽅向写成⻆度的写法

        ⻆度单位是deg 。

        语法：background: -webkit-linear-gradient(0deg,red,green);

        不加前缀：如果你写的是0deg，那么这个⽅向默认是从下到上的。你在去转动的时候他是瞬顺时针⽅向的。

        加前缀：0deg==== 默认从左到右，逆时针的。

三、渐变的分类之径向渐变

从⼀个点向四周的渐变。径向渐变写起始点必须要加浏览器前缀，否则不⽣效。

        语法：background: -webkit-radial-gradient( 起点 , 形状 , ⼤⼩，颜⾊ 1, 颜⾊ 2, 颜⾊ 3 。。。 );

        从中⼼点向四周扩散，从红⾊到绿⾊再到蓝⾊：background: -webkit-radial

        gradient(center,red,green,blue);

        起点：

        center===中⼼点

        left top===左上

        left center===左中

        也可以写具体的坐标点，单位可以是px 也可以是 %

注意：

        径向渐变如果你不写起点，默认就是中⼼点

        如果不写起点，就可以不加前缀

        写了起点就要加前缀。

径向渐变形状：

        circle=====圆

        ellipse====椭圆

        正⽅形盒⼦椭圆和圆是⼀样的效果，最终都会呈现圆形

        ⻓⽅形盒⼦，那么默认是椭圆。

径向渐变的⼤⼩（不同尺⼨的渐变）：

        closest-side:最近边

        farthest-side:最远边

        closest-corner:最近⻆

        farthest-corner：最远⻆

四、渐变的分类之重复性渐变

        ⽆论是线性还是径向都⽀持重复。

        语法：在线性单词之前加repeating 即可。⾊值的百分⽐⾃⼰去定义。

        线性渐变的重复：background: repeating-linear-gradient(to bottom,red 0%,green 10%,blue 20%);

        径向渐变：background: -webkit-repeating-radial-gradient(center center,red 0%,green 10%,blue

20%);

五、精灵图

        图⽚整合技术：意思就是将好多⼩图整理到⼀张⼤图上⾯去。

        这种技术也叫作精灵图、雪碧图、sprite 。

        为什么要使⽤精灵图（好处）

                a) 减少服务器的请求次数

                b) 减⼩图⽚体积

                c) 提⾼⽹⻚的加载速度

六、过渡   

        1． 允许 css 的值在⼀定时间内平滑的过渡，看起来不是那么的⽣硬

        2． 这种效果可以⽤在⿏标滑过、单击、获得焦点等触发

        3． 示例：⿏标滑过让盒⼦宽⾼加⼤

        如果不加这句话，那么⿏标滑过盒⼦会瞬间变到200

        加上这句话的意思：⿏标滑过⽤2s 的时间让宽⾼变到 200px 。

        过渡的属性：      

        ①单⼀写法：

                transition-property：需要参与过渡的属性

                transition-duration：过渡的时间

                transition-delay：延迟时间

                transition-timing-function：运动曲线

        ②复合写法（简写⽅式）

                transition：过渡的属性 过渡时间 延迟时间 运动曲线;

        ③运动曲线：

                1）ease ：逐渐慢下来 ==== 默认值

                2）linear ：匀速运动

                3）ease-in ：加速运动

                4）ease-out ：减速运动

                5）ease-in-out ：先加速后减速

                6）⻉塞尔曲线（了解）

                        http://cubic-bezier.com/

                7）步⻓运动：steps

七、2d变形  

变形属性 transform ，可以实现元素的（位移、旋转、缩放）等。有 2D 和 3D 之分

x 轴为⽔平⽅向，右侧是正数， y 轴是垂直⽅向，向下为正数。

( ⼀ ) 位移： translate

位移：实现元素的位置移动

        transform: translateX(100px);======⽔平向右移动

        transform: translateY(100px);======垂直向下移动

        transform: translateX(100px) translateY(100px);====以上两句可以写成这⼀句

        transform: translate(100px,100px);====这是更加简洁的写法，第⼀个值是 x 坐标，第⼆个值 y 坐标

( ⼆ ) 缩放 :scale

        1. 让元素根据中⼼原点进⾏缩放，默认值是 1 。

        2. ⼩于 1 的值就是缩⼩

        3. ⼤于 1 的值就是放⼤

        4. scale(2)就是将宽和⾼都放⼤ 2 倍

        5. scale(2,1)就是宽放⼤ 2 倍，⾼不变

        scaleX()====在 x 轴上缩放

        scaleY()====在 y 轴上缩放

        scale()====x和 y ⼀起缩放

        这⾥不跟单位 是倍数关系

( 三 ) 旋转 :rotate

        度数单位是deg 。

        transform: rotateX(30deg);=====围绕 x 轴旋转

        transform: rotateY(30deg);=====围绕 y 轴旋转

        transform: rotateX(30deg) rotateY(30deg);=====围绕 x 和 y 都旋转。

        transform: rotate(30deg);=====围绕中⼼点旋转

( 四 ) 倾斜 :skew

( 五 ) 变形原点： transform-origin

        1. 变形原点就是让元素围绕着哪个点进⾏变形。

        2. 这个属性只有在设置了 transform 属性的时候才会起作⽤。

        3. 元素默认原点就是中⼼点（中⼼位置）

        建议：

为了保证缩和旋转不对位移产⽣影响，⼀般如果⽤组合写法的话建议位移放在最前⾯。