css渐变和动画

渐变

线性渐变

线性渐变 linear-gradient(不平铺)/repeating-linear-gradient(平铺)
开始位置的角度 起始颜色 终止颜色
to left(从又开始到左边去) 颜色后面可以给百分比或者百分比

    .div1{
        background: linear-gradient( to left, red 150px,blue 50%);
       
    }

可以给平铺 repeating-linear-gradient

    .div2{
        background: repeating-linear-gradient(to left, red 150px,blue 50%);
    }

径向渐变

径向渐变 radial-gradient(不平铺)/repeating-radial-gradient(平铺)
形状 发散方向 起始颜色 终止颜色
circle(圆形) at top(从上开始) 颜色后面可以给百分比或者百分比
默认椭圆

    .div3{
        background: radial-gradient(at top,yellow,red);
    }
    .div4{
        background: repeating-radial-gradient(yellow 10px,red 20%);
    }
    .div5{
        background: repeating-radial-gradient(circle,yellow 10px,red 20%);
    }

动画效果–变形

变形后占位状态不变

平移(translate)

    /* 平移(translate) 
            x轴偏移量(正右负左)           y轴偏移量(正下负上)
    */
    .div1:hover{
        background-color: aqua;
        transform: translate(10px,10px);
    }

旋转(rotate

    /* 旋转(rotate)
            角度(deg)
    */
    .div2:hover{
        background-color: aqua;
        transform: rotate(30deg);
    }

缩放(scale)

    /* 缩放(scale)
            默认为1，小于1为缩小，大于1为放大
        可以搭配改变位置(transform-origin: x轴  y轴  ----值为上(top)下(bottom)左(left)右(right)居中(center))使用
    */
    .div3:hover{
        background-color: aqua;
        transform: scale(0.4);
        transform-origin: center right;
    }

倾斜(skew)

    /* 倾斜(skew)
            角度(deg)

                也可以控制x轴和y轴  要写为skewX/skewY
    */
    .div4:hover{
        background-color: aqua;
        transform: skew(50deg);
    }

动画效果–过渡(transition)

 /* 动画效果--过渡(transition)
                属性            时间            过渡速度
              (默认all)     一般单位为秒(s)     linear(匀速)
                                               ease(慢快慢)
         */
        .div1:hover{
            background-color: aqua;
            transform: scale(0.5);
            transition: 2s;
        }

关键帧

    /* 关键帧( @keyframes 关键帧名(自己起))
            可以设置到百分之多少时给什么效果
    */
    @keyframes dh1{
        /* 10%的时候改为圆角 */
        10%{
            border-radius: 50%;
        }
        /* 运行到20%的时候让他进行缩放 */
        20%{
            transform: scale(0.3);
        }
        /* 到80%的时候让他进行平移和旋转 */
        80%{
            transform: translate(100px,100px) rotate(3600deg) ;
        }
    }

    /* 使用编辑好的关键帧时要用     animation属性
                                    值为 关键帧名 时间 过渡速度
    */

    .div2:hover{
            background-color: aqua;
            animation: dh1 5s;
    }