渐变、浏览器内核及前缀、精灵图制作、过渡和变形

一、渐变

1.线性渐变 background: linear-gradient(方向,颜色值...);
    不加浏览器前缀:方向要加to
    加了前缀就不能写to了
2.径向渐变:background: radial-gradient(起点,颜色值...);
    如果不写起点,默认起点是中心点,可以不写前缀
    如果写了起点,就最好前缀给写上
3.不管是线性还是径向都支持重复
    只需要在渐变的单词之前写repeating
    需要给颜色色值分配百分比

二、浏览器的内核以及前缀(重点记忆)

1.⾕歌chrome======内核(webkit)========前缀（-webkit-）
2.苹果safari======内核（webkit）======前缀(-webkit-)
3.⽕狐firefox=====内核（gecko）=======前缀(-moz-)
4.欧朋opera=======内核（presto）======前缀（-o-)
5.IE=============内核（trident）=====前缀（-ms-)

三、精灵图

精灵图（雪碧图、sprite）：是一种图片整合技术（在一张大图之上有很多张小图）
好处：(重点记忆)
    1.减少对服务器的请求次数
    2.提高网页的加载速度
    3.减小图片的体积(大小)
使用精灵图：用到的核心技术是背景图片和背景图片的位置

四、过渡

单一写法(非简写方式)
    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.steps(步数)===步数运动
    7.贝塞尔曲线

五、变形transform

 坐标轴：
    x轴：向右为正
    y轴：向下为正
1.位移：translate
    translateX()
    translateY()
    tranform:translateX() translateY();
    transform:translate(x,y)
2.旋转：rotate
    单位:deg
    transform:roateX()===围绕x轴旋转
    transform:rotateY()===围绕y旋转
    transform:rotate()====围绕中心点旋转
3.缩放：scale 
    transform:scaleX()======对宽度进行缩放
    transform:scaleY()======对高度进行缩放
    transform:scale(x,y)======
    transform:scale(1个值)======宽高同时改
4.倾斜：skew

变形点：tranform-origin