渐变与2D形变#前端

重复性渐变

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

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

        设置重复性渐变需要注意

        1.需要设置重复性渐变的颜色起始位置

        2.至少设置两种颜色

 

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

.rd{
            height: 100px;
            background:  repeating-linear-gradient(90deg,#fff 0,#fff 50px,transparent 50px,transparent 100px ) repeat-x 0 center;
            background-size: 100px 20px;
            background-color: #000;
        }
        .wp{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: repeating-radial-gradient(100px at center  center,#f00 0px,#f00 10px ,#0f0 10px,#0f0 20px);
        }

        .ai{
            width: 400px;
            height: 400px;
            border:1px #f00 solid;
            margin: 0 auto;
            /* background: repeating-linear-gradient(90deg,transparent 0,transparent 10px ,#000 10px ,#000 20px),repeating-linear-gradient(0deg,transparent 0,transparent 10px ,#000 10px ,#000 20px); */

            background: repeating-linear-gradient(90deg,transparent 0,transparent 20px ,#000 20px ,#000 25px),repeating-linear-gradient(0deg,transparent 0,transparent 20px ,#000 20px ,#000 25px);
        }

2D形变包含的内容是

        1.平移 translate

        2.旋转

        3.缩放

        4.拉伸（倾斜）

        注意：

            1.行元素不能形变，img和input除外

            2.仅仅是元素形状的变化，文档流的空间并没有变化

        设置形变使用transform属性

            平移使用 translate

                1.水平方向平移 translateX（num）num是具体指，正数向右平移，负数向左平移

                2.垂直方向平移 translateY（num）num是具体指，正数向下平移，负数向上平移

                3.复合写法 translate（x,y）

            旋转使用 rotate（度数） 度数的单位是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 一样，分为z轴倾斜，y轴倾斜和复合写法

                skewX(n+deg) 元素倾斜，就是元素和Y轴的夹角为n度

                X轴的度数为正，向左倾斜

                X轴的度数为负，向右倾斜

                Y轴同理

                注意，度数不能是90度，使用复合写法，他们的和不能为90

.wp{
            width: 100px;
            height: 100px;
            background: #04be02;
            transform: translate(100px,100px);
            padding: 50px;
        }
        .cai{
            width: 200px;
            height: 200px;
            transition: all 5s;
            /* 设置形变（旋转）的参考点 */
            transform-origin:300px 300px ;
        }

        .cai:hover{
             transform: rotate(360deg);
            }
        .sc,.skew{
            width: 100px;
            height: 100px;
            background: #04be02;
            color: #ff0;
            font-size: 100px;
            text-align: center;
            line-height: 100px;
            margin: 50px auto;
            transition: all 1s;
        }
        .sc:hover{
            transform: scale(2) rotate(180deg);
        }
        .skew:hover{
            transform: skew(45deg,45deg);
        }