兼容问题

浏览器前缀

-ms-    IE浏览器

-moz-     火狐浏览器前缀

-webkit-     谷歌，苹果浏览器前缀

- o -   open

线性渐变

background: linear-gradient(方向, 颜色1, 颜色2, ...);

    颜色值最少写两个，最多不限

    第一个参数方向

        从一个边到另外一个边        to 结束的方向值

        从一个角到另外一个角        to 结束的角

        deg        角度值

创建重复的线性渐变： 

background:repeating-linear-gradient(to right,#ff0,#0f0)

兼容写法

写了浏览器前缀后

        第一个参数方向

            从一个边到另外一个边        不加to    直接写开始的方向值

            从一个角到另外一个角        不加to    直接写开始的方向值

            deg      90度减去标准写法的角度值

径向渐变

属性：background

    属性值 radial-gradient（参数）

        第一个参数表示渐变的起点位置

            默认在中心点  或者  value（50px 50px）  可以省略不写

        第二个参数表示渐变的形状

            默认椭圆    参数 ellipse 椭圆    circle 圆       可以省略不写

        第三个参数渐变的大小

            closest-side    最近边；

            farthest-side    最远边；

            closest-corner    最近角；

            farthest-corner    最远角；

    第四个和第五个参数表示颜色，后面参数也是。

属性值用逗号链接，第2个属性值和第三个属性值一起写的话要把逗号换成空格

过度 transition

属性

    transition-property    参与过度的属性     默认所有属性都参与    一般不写

    transition-duration    过度的时间    一般工作中常用的是0.8S

    transition-delay    延迟过度的时间    比正常过度晚几秒

    transition-timing-function     过度的运动方式

        -    linear    匀速运动

        -    ease    先快然后变慢

        -    ease-in    先慢然后变快

        -    ease-in-out   先加速后减速

2D位移

transform：translate（参数）

    参数可以有两个    X,Y用逗号隔开    表示水平和垂直方向的位置数值

    translateX（参数），translateY（参数）    表示只设置X轴或者Y轴上的数值

2D缩放

transform：scale（参数）     参数单位deg

    两个参数    用数字表示X轴和Y轴的倍数，相同的倍数可以设置一个参数

    scaleX（），scaleY（）表示只设置X轴或者Y轴上的数值

    参数是负数    -    先缩小至隐藏再放大至数值的倍数，旋转180度

    参数等于0     -    隐藏

    参数小于0     -    缩小

    参数等于1     -    维持不变 / 显示

    参数大于1     -    放大多少倍

如果有多个移动属性先书写位移再书写其他属性。

旋转和倾斜        了解

transform

    旋转属性值 rotae（角度值）    参数单位deg

        只有一个参数    为正数时顺时针旋转，为负数时逆时针旋转    默认是Z轴

        rotateX（）    单杠运动    -    永远是朝着正轴方向观察

        rotabe（）    旋转木马

    倾斜属性值 skew：（）    参数单位deg

        X Y    相对于X轴或者Y轴倾斜角度

        skewX， skewY