15多个背景图，重复性渐变，2D形变，过渡动画

15多个背景图，重复性渐变，2D形变，过渡动画

01多个背景图

css3 支持设置多个背景图

设置方式是使用英文逗号分隔开每一个设置

background: url(./images/icon_img.gif) no-repeat 0 0,url(./images/icon_pdf.gif) no-repeat right top,#04be02 url(./images/icon_ppt.gif) no-repeat center center;

02重复性渐变

重复性渐变

repeating-linear-gradient 设置重复线性渐变，设置方式和线性渐变一样，效果是自动渲染出重复的渐变内容

repeating-radial-gradient 设置重复径向渐变，语法同径向渐变一致

设置重复性渐变需要注意

    1.需要设置重复渐变的颜色起始位置
    2.至少设置两种颜色

同背景图一样，也可以设置多组渐变,同时设置多组背景图或者渐变图，后面设置的会被前面设置的图覆盖

background: repeating-radial-gradient(100px at center center,#f00 0px,#f00 10px,#0f0 10px,#0f0 20px);
background: repeating-linear-gradient(90deg,transparent 0px,transparent 10px,#000 10px,#000 20px),repeating-linear-gradient(0deg,#ff0 0px,#ff0 10px,#f00 10px,#f00 20px);

032D形变

2D形变包含的内容是

    1.平移
    2.旋转
    3.缩放
    4.拉伸(倾斜)

注意：

    1.行元素不能形变，img和input除外
    2.仅仅是元素形状的变化，文档流的空间并没有变化

设置形变，使用 transform 属性

平移使用 translate

    1.水平方向平移 translateX(num) num是具体的值，正数向右平移，负数向左平移
    2.垂直方向平移 translateY(num) num是具体的值，正数向下平移，负数向上平移
    3.复合写法 translate(x,y)

旋转使用 rotate(x,y) 度数的单位是deg

    度数为正，顺时针旋转
    度数为负，逆时针旋转
    *⭐🐕🐱形变的层级，后来者居上

使用 transform-origin 属性，设置形变的参考点。

    默认值是center center
    transform-origin:x轴方向的位置 y轴方向的位置
            值
              1.具体的数值
              2.left top right bottom center 等方向名词的组合，如果只写一个，则另一个默认是center

使用缩放 scale(x轴方向的倍数，y轴方向的倍数)

    如果x轴和y轴的缩放倍数相同，则可以只写一个
    scale(n)

如果需要把形变组合在一起

    transform: scale(2) rotate(180deg) translate(30px,50px);

设置倾斜 skew()

    写法和 translate 一样，分为x轴倾斜，y轴倾斜和复合写法
    skewX(n+deg) 元素倾斜，就是元素和y轴的夹角为n度
    X轴的度数为正，向左倾斜
    X轴的度数为负，向右倾斜
    Y轴同理
    注意度数不能使90度，使用符合写法，他们的和不能为90度

transform: scale(0.2) rotate(180deg);

04过渡动画

如果同时设置平移和缩放，有两种写法

    1.先写平移，然后再缩放，他的结果使 先平移到具体位置，然后再该位置上执行缩放
    2.先写缩放，然后再平移，他的结果是 先把所有的值进行缩放，然后按照缩放后的值平移
    一般都用第一种写法

过渡动画，设置元素从一种状态达到另一种状态的动画效果

设置属性是 transition

transition-property 设置需要过渡的css属性，

    如果有多个属性需要过渡，则可以用英文,逗号分开，也可以直接设置all，all表示所有变化的css属性都需要过渡，如果不设置该属性，默认为all

transition-duration 设置过渡动画的持续时间，单位是s秒

transition-delay 设置过渡动画的延迟时间，

    动画开始的时候有延迟，结束的时候也有延迟

transition-timing-function 设置动画的变化曲线

    ease 默认值，先快后慢
    linear 匀速运动
    ease-in 淡入效果，先快后慢
    ease-out 淡出效果，先匀速，再快，后慢
    ease-in-out 淡入淡出，两边慢，中间快
    以上均属于贝塞尔曲线中的特殊曲线

过渡动画也可以合写：

    transition:property duration timing-function delay
    后面两个可以省略，直接设置默认值

过渡动画的触发时机

    过渡动画不会主动触发
    触发方式：
    1.通过伪类触发 hover focus targeted
    2.媒体查询
    3.通过js触发