渐变：

• 线性渐变（Linear-Gradients）-向上，向下，向左，向右，对角
• 径向渐变（Radial-Gradients）-由中心定义

  线性渐变：

  background-image:linear-gradient(direction,color1,color2,...)

  默认情况下从上到下

  #grad1 {
    height: 200px;
      background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#e66465, #9198e5);
  }
  

  
  从左到右

  #grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
  }
  

  对角

  #grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
  }
  

  使用角度：
  
  0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变 ```css

  grad1 {

  height: 100px; background-color: red; / 浏览器不支持的时候显示 / background-image: linear-gradient(0deg, red, yellow); }

grad2 {

height: 100px; background-color: red; / 浏览器不支持的时候显示 / background-image: linear-gradient(90deg, red, yellow); }

grad3 {

height: 100px; background-color: red; / 浏览器不支持的时候显示 / background-image: linear-gradient(180deg, red, yellow); }

grad4 {

height: 100px; background-color: red; / 浏览器不支持的时候显示 / background-image: linear-gradient(-90deg, red, yellow); }

<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/256682/1644990453626-5dcf8876-b103-44b6-b8ec-a3c9fc3bf271.png#clientId=uc68bff30-ec0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=497&id=u359515e8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=497&originWidth=908&originalType=binary&ratio=1&rotation=0&showTitle=false&size=66604&status=done&style=none&taskId=ub4dec378-f9e0-4696-8135-910ed4f931d&title=&width=908)<br />**多颜色节点：**

//均匀分布 background-image: linear-gradient(red, green, blue); //自定义分布 background-image: linear-gradient(red 10%, green 85%, blue 90%);

![image.png](https://cdn.nlark.com/yuque/0/2022/png/256682/1644990715127-6ca88b52-c31b-4b8c-a09d-410587ac85e8.png#clientId=uc68bff30-ec0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=211&id=u9a1efeb0&margin=%5Bobject%20Object%5D&name=image.png&originHeight=211&originWidth=886&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6453&status=done&style=none&taskId=u9795139a-301f-49d3-97bd-39b54d33500&title=&width=886)<br />**使用透明度：**

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

**重复的线性渐变：**

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

<a name="L3VlA"></a>
### 径向渐变：

background-image:radial-gradient(shape size at position,start color,….,last color)

**均匀分布：**

background-image: radial-gradient(red, yellow, green);

![image.png](https://cdn.nlark.com/yuque/0/2022/png/256682/1644990997465-b06e8270-2552-4c14-b980-c6b8319f31ab.png#clientId=uc68bff30-ec0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=152&id=u513a48b9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=152&originWidth=201&originalType=binary&ratio=1&rotation=0&showTitle=false&size=43308&status=done&style=none&taskId=u343871d8-3728-4efa-b484-094a3eca92f&title=&width=201)<br />不均匀分布：

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

![image.png](https://cdn.nlark.com/yuque/0/2022/png/256682/1644991036201-b25d1d69-41a1-4d56-8d63-edd25a3c3f52.png#clientId=uc68bff30-ec0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=149&id=u92548025&margin=%5Bobject%20Object%5D&name=image.png&originHeight=149&originWidth=201&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26942&status=done&style=none&taskId=u37526633-f9f9-4a5e-9023-7da7b9239cd&title=&width=201)<br />**设置形状：**

//默认椭圆 background-image: radial-gradient(red, yellow, green); //圆形 background-image: radial-gradient(circle, red, yellow, green);

![image.png](https://cdn.nlark.com/yuque/0/2022/png/256682/1644991250287-b690ca57-1d2b-4366-9f78-167a1421feb9.png#clientId=uc68bff30-ec0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=411&id=u0c5b2736&margin=%5Bobject%20Object%5D&name=image.png&originHeight=411&originWidth=233&originalType=binary&ratio=1&rotation=0&showTitle=false&size=75469&status=done&style=none&taskId=ud093929f-3659-475c-9763-d9b736cf85d&title=&width=233)<br />**重复的径向渐变：**

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

<a name="rgqiD"></a>
## 转换：
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸，改变元素的大小，形状和位置；
<a name="v33Ek"></a>
### 2D转换：
<a name="HEllx"></a>
#### translate() 
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
```css
div{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2{
    transform:translate(50px,100px);
    -ms-transform:translate(50px,100px); /* IE 9 */
    -webkit-transform:translate(50px,100px); /* Safari and Chrome */
}

rotate()

一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2{
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
}

scale()

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 标准语法 */
}

skew()

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX();表示只在X轴(水平方向)倾斜。

• skewY();表示只在Y轴(垂直方向)倾斜。

  div{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
  }
  div#div2{
    transform:skew(30deg,20deg);
    -ms-transform:skew(30deg,20deg); /* IE 9 */
    -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
  }
  

  

  matrix()

  matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

  div{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
  }
  

  

  3D转换：

  rotateX()

  围绕其在一个给定度数X轴旋转的元素。

  div{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
  }
  div#div2{
    transform:rotateX(95deg);
    -webkit-transform:rotateX(95deg); /* Safari and Chrome */
  }
  

  
  类似于体操运动员：
  

  rotateY()

  围绕其在一个给定度数Y轴旋转的元素。

  div{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
  }
  div#div2{
    transform:rotateY(130deg);
    -webkit-transform:rotateY(130deg); /* Safari and Chrome */
  }
  

  

  类似于钢管舞：

  
  perspective

  定义：3D 元素距视图的距离，以像素计;
  景深，也称为透视，视角，取决于你看到的是2D还是3D
  设置元素被查看位置的视角,3D立体效果
  1)属性值:像素
  2)给3D元素父级添加景深,不会出现梯形效果,近大远小的效果
  3)给3D元素添加景深,会出现梯形效果
  当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

  perspective: 600px;
  

  translateZ：

  近大远小的原理中，translateZ值越大，元素越大

  perspective-origin:

  perspective-origin: x-axis y-axis;
  

• x-axis：定义该视图在 x 轴上的位置。默认值：50%。

• y-axis：定义该视图在 y 轴上的位置。默认值：50%。

  transform-style: preserve-3d

  2D转换为3D

  backface-visibility

  现实生活中，无法穿透物体看到物体背后的物体，所以一般隐藏背后的元素。

  backface-visibility:hidden;
  

  
  

  例子：旋转木马图片

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d旋转图集</title>
    <style>
        main{
            position: relative;
            width: 100vw;
            height: 100vh;
            background-color: #fff;
            //加景深
            perspective: 900px;
        }
  
        div{
                    position:absolute;
            left: 50%;
            top:30%;
            width: 190px;
            height: 300px;
            //添加3D效果
                        transform-style: preserve-3d;
            //动画
                        animation:xuanzhuan linear 10s infinite
        }
  
        /* 设置图片的大小 */
        div img{
                position: absolute;
            width: 190px;
            height: 300px;  
        }
  
       img:nth-child(1) { transform: rotateY(   0deg ) translateZ(300px); }
       img:nth-child(2) { transform: rotateY(  40deg ) translateZ(300px);}
       img:nth-child(3) { transform: rotateY(  80deg ) translateZ(300px);}
       img:nth-child(4) { transform: rotateY( 120deg ) translateZ(300px);}
       img:nth-child(5) { transform: rotateY( 160deg ) translateZ(300px);}
         img:nth-child(6) { transform: rotateY( 200deg ) translateZ(300px);}
         img:nth-child(7) { transform: rotateY( 240deg ) translateZ(300px);}
         img:nth-child(8) { transform: rotateY( 280deg ) translateZ(300px);}
         img:nth-child(9) { transform: rotateY( 320deg ) translateZ(300px);}
  
       @keyframes xuanzhuan {
                from{transform: rotateY(0deg)}
                to{transform: rotateY(360deg)}
     }
  
    </style>
  </head>
  <body>
    <main>
        <div>
            <img src="./assets/1.jpg" alt="">
            <img src="./assets/2.jpg" alt="">
            <img src="./assets/3.jpg" alt="">
            <img src="./assets/4.jpg" alt="">
                      <img src="./assets/5.jpg" alt="">
                  <img src="./assets/6.jpg" alt="">
                  <img src="./assets/7.jpg" alt="">
                  <img src="./assets/8.jpg" alt="">
                  <img src="./assets/9.jpg" alt="">
        </div>
    </main>
  </body>
  </html>
  

  如何计算translateZ：
  九张图：360/9=40，也就是每张图要旋转40deg；
  
  如图所示，如果只定义rotateY，九张图片会挤在一起，完全体现不出效果，所以要让每张图片往外跨出一步，这一步的值如何计算呢：

按照这个逻辑，上面例子中每张图片宽度是190px，translateZ为233.5
则每张图片至少要向外侧走233.5px，结合实际，留出空隙，选择300px

例子：开门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开门</title>
    <style>
       div{
             perspective: 1200px;
             transform-style: preserve-3d;
          backface-visibility: hidden;
      }

      img{
                 width:300px;
                 height:450px;
                 transform: rotateY(0deg);
                 transform-origin: left;
                 transition: all 2s;
           }

        img:hover{
            transform: rotateY(-90deg);
      }
    </style>
</head>
<body>
      <div>
           <img src="./assets/2.jpg" alt="">
      </div>
</body>
</html>

过渡：

元素从一种样式逐渐改变为另一种的效果。

• 指定要添加效果的CSS属性
• 指定效果的持续时间。 ```css div{ width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; / Safari / }

div:hover{ width:300px; }

鼠标移动到元素上，2s时间内，宽度从100px过渡到300px；

//多项改变 transition: width 2s, height 2s, transform 2s;

```css
div{
    //属性名称
    transition-property: width;
    //持续时间
    transition-duration: 1s;
    //规定过渡效果的时间曲线。默认是 "ease"。
    transition-timing-function: linear;
    //延时时间
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}
//简写
transition: width 1s linear 2s;

动画：

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}
}

myfirst是动画名称
注意：必须定义动画的名称和动画的持续时间

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */{
    from {background:red;}
    to {background:yellow;}
}

或者：

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

animation属性:

div{
    //动画的名称
    animation-name: myfirst;
    //动画持续时间
    animation-duration: 5s;
    //规定动画的速度曲线，默认是 "ease"。
    animation-timing-function: linear;
    //延时
    animation-delay: 2s;
    //规定动画被播放的次数，默认是 1
    animation-iteration-count: infinite;
    //规定动画是否在下一周期逆向地播放，默认是 "normal"
    animation-direction: normal;
    //规定动画是否正在运行或暂停,默认是 "running"
    animation-play-state: running;
}
//简写
animation: myfirst 5s linear 2s infinite normal;

多媒体查询：

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

• not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
• only: 用来定某种特别的媒体类型。
• all: 所有设备 ```css body { background-color: pink; }

@media screen and (max-width: 480px) { body { background-color: lightgreen; } }

如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。
```css
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

Css、Scss、Sass和Less(大概了解)

Sass/Scss、Less是什么?

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数.

Sass/Scss与Less区别:

变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样

Less
@color: #00c; /* 蓝色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 红色边框 */
}

#footer {
  border: 1px solid @color; /* 蓝色边框 */
}

Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}

scss
$color: #00c; /* 蓝色 */

#header {
  $color: #c00; /* red */
  border: 1px solid $color; /* 红色边框 */
}

#footer {
  border: 1px solid $color; /* 蓝色边框 */
}

Sass-作用域编译后

#header{border:1px solid #c00}
#footer{border:1px solid #c00}

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

/* Sample Sass “if” statement */

@if lightness($color) > 30% {

} @else {

}

/* Sample Sass “for” loop */

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

SCSS:

https://www.yuque.com/cuggz/feplus/nste42#7e7ebbb2

跑马灯：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .content-left {
            display: flex;
            margin-top: 20px;
            animation: paomadengLeft 30s linear 3s infinite;
        }
        .content-right {
            display: flex;
            margin-top: 20px;
            animation: paomadengright 30s linear 3s infinite;
        }

        .content-item {
            width: 300px;
            height: 450px;
            margin: 0 20px;
        }

        @keyframes paomadengLeft {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }
        @keyframes paomadengright {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

    </style>
</head>
<body>
<div style="display: flex">
    <div class="content-left">
        <img src="./assets/1.jpg" class="content-item"/>
        <img src="./assets/2.jpg" class="content-item"/>
        <img src="./assets/3.jpg" class="content-item"/>
        <img src="./assets/4.jpg" class="content-item"/>
        <img src="./assets/5.jpg" class="content-item"/>
        <img src="./assets/6.jpg" class="content-item"/>
        <img src="./assets/7.jpg" class="content-item"/>
        <img src="./assets/8.jpg" class="content-item"/>
        <img src="./assets/9.jpg" class="content-item"/>
    </div>
    <div class="content-left">
        <img src="./assets/1.jpg" class="content-item"/>
        <img src="./assets/2.jpg" class="content-item"/>
        <img src="./assets/3.jpg" class="content-item"/>
        <img src="./assets/4.jpg" class="content-item"/>
        <img src="./assets/5.jpg" class="content-item"/>
        <img src="./assets/6.jpg" class="content-item"/>
        <img src="./assets/7.jpg" class="content-item"/>
        <img src="./assets/8.jpg" class="content-item"/>
        <img src="./assets/9.jpg" class="content-item"/>
    </div>
</div>
<div style="display: flex">
    <div class="content-right">
        <img src="./assets/1.jpg" class="content-item"/>
        <img src="./assets/2.jpg" class="content-item"/>
        <img src="./assets/3.jpg" class="content-item"/>
        <img src="./assets/4.jpg" class="content-item"/>
        <img src="./assets/5.jpg" class="content-item"/>
        <img src="./assets/6.jpg" class="content-item"/>
        <img src="./assets/7.jpg" class="content-item"/>
        <img src="./assets/8.jpg" class="content-item"/>
        <img src="./assets/9.jpg" class="content-item"/>
    </div>
    <div class="content-right">
        <img src="./assets/1.jpg" class="content-item"/>
        <img src="./assets/2.jpg" class="content-item"/>
        <img src="./assets/3.jpg" class="content-item"/>
        <img src="./assets/4.jpg" class="content-item"/>
        <img src="./assets/5.jpg" class="content-item"/>
        <img src="./assets/6.jpg" class="content-item"/>
        <img src="./assets/7.jpg" class="content-item"/>
        <img src="./assets/8.jpg" class="content-item"/>
        <img src="./assets/9.jpg" class="content-item"/>
    </div>
</div>
</body>
</html>

重复两个相同的图片data，是为了首尾衔接；

无限滚动：

例子，项目中工作室动态
定时器消耗性能，采用css动画实现

/* 无限滚动 */
.infinite-y{
  animation: infinitevertical 30s linear infinite;
  &:hover {
    animation-play-state: paused;
  }
}

.infinite-x{
  animation: infinitehorizontal 30s linear infinite;
  &:hover {
    animation-play-state: paused;
  }
}


/* 无限滚动垂直 */
@keyframes infinitevertical {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50%);
  }
}
/* 无限滚动水平 */
@keyframes infinitehorizontal {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

var():

用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用;
语法：

var(custom-property-name, value)

custom-property-name自定义的属性值，必须以”—“开头;

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

在父级或根元素上定义属性值

@mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

创建了一个名为important-text的混入

.danger {
  @include important-text;
  background-color: green;
}

@include 指令可用于包含混入
所以上面的例子等于

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}