前端基础渐变与动画(九)

渐变

线性渐变

            /* deg角度 
               位置属性 to  + right
                颜色 */
            /* background: linear-gradient(10deg,red ,blue ,pink); */

平铺线性渐变

background: repeating-linear-gradient(red ,blue ,pink);

径向渐变

 /* 变圆circle
    位置 at top */
/* background: radial-gradient(red,blue,pink); */

平铺线性渐变

background:repeating-radial-gradient(red,blue,pink);

动画效果

变形

             /* 平移 第一个值为横向偏移量 第二个值为纵向偏移量 平移之后占位状态不变*/
           /* transform: translate(200px,120px); */
           /* 旋转 角度*/
           transform: rotate(280deg);
           /* 缩放  默认为一 小于则缩写 大于则放大*/
           transform: scale(0.7);
           /* 改变缩放位置 方向变量两两组合使用*/
           /* transform-origin: top center; */
            /* 倾斜 */
            transform: skew(30deg);

过渡

           /* 过渡属性   属性  时间 过度速度
            第一个值是属性 一般为all也可以是其他
            第二个值是时间单位
            第三个值是过渡速度 linear是匀速*/
           transition: all 2s linear;
           
            } 

关键帧

        @keyframes nam{
            0%{
                transform: scale(0.1);
            }
            50%{
                transform: scale(0.3);
            }
            100%{
                transform: scale(0.7);
            }