css渐变

css渐变

一：线性渐变

1. 通过方位词定义方向

   	/* 定义渐变方向，渐变至少两个颜色 */
       /* 通过方位词你定义方向 */
       background-image: linear-gradient(to top,pink,skyblue);
   

2. 通过角度定义方向 deg (正方向为顺时针，负方向为逆时针)

    /* 通过角度定义方向 deg (正方向为顺时针，负方向为逆时针)*/
       background-image: linear-gradient(135deg,green,blue);
   

3. 分段颜色的效果

   /* 分段颜色的效果 */
       background-image: linear-gradient(to right,pink 0 200px,skyblue 200px 400px);
   

4. 重复效果（像进度条一样）

   /*普通做法*/
   background-image: linear-gradient(135deg,green 0 20px,transparent 20px 40px,green 40px 60px,transparent 60px 80px,green 80px 100px,transparent 100px 120px,green 120px 140px,transparent 140px 160px,green 160px 180px,transparent 180px 200px);
   /*简便做法*/
   background-image: repeating-linear-gradient(135deg,green 0 20px,transparent 20px 40px);
   

5. 层叠样式

   background-image: repeating-linear-gradient(to right,pink 0 40px,transparent 40px 80px),repeating-linear-gradient(to bottom,green 0 40px,transparent 40px 80px);
   

二：径向渐变

1. 定义形状(circle:圆形渐变，没有或ellipse为默认椭圆)

   /* 定义形状 */
       background-image: radial-gradient(circle,pink,green);
   

2. 定义大小

      /* 定义大小 */
       background-image: radial-gradient(circle 100px,pink,green);
   

3. 定义渐变的开始位置 at

    /* 定义渐变的开始位置  at*/
       background-image: radial-gradient(circle 100px at 20% 40%,pink,green);
       background-image: radial-gradient(circle 100px at 100px 100px,pink,green);
   

4. 义渐变范围

   /* 定义渐变范围 */
   background-image: radial-gradient(circle,yellow 0 100px,blue 100px 200px);
   

5. 阴影

   /* 阴影 */
       background-image: radial-gradient(circle at 50% 10%,orange 0 80px,yellow 100px 200px);
   

6. 重复效果（像棒棒糖一样，晕）

    /* 重复效果（像棒棒糖一样，晕） */
       background-image: repeating-radial-gradient(skyblue 0 20px,yellow 20px 40px);
   

三:动画 （transition）

1. transition-property: ; 动画过渡的属性 width color

   .box1:hover{
       width: 400px;
       height: 200px;
       /* 当有两个要变化的属性时 transition-property规定的元素缓慢变化，其他一个立即变化 */
       transition-property: height;
       transition-duration: 3s;
       background-color: plum;
       transition-timing-function: ease;
   }
   

2. transition-delay: ; 动画延迟时间

.gg:hover{
    width: 200px;
    transition: width 2s,height 1s;
    height: 300px;
    transition-delay: 3s;
}

3. transition-duration: ; 动画完成时间 单位 s和ms (必填)

   .box2:hover{
       transition-duration: 3s;
       width: 400px;
       transition-timing-function: ease-in;
   }
   

4. transition-timing-function: ; 动画过渡的类型

   • ease 慢快慢（默认） linear 匀速 ease-in缓慢启动 ease-out 缓慢结束 ease-in-out 开始和结束缓慢

         .box2:hover{
         transition-duration: 3s;
         width: 400px;
         transition-timing-function: ease-in;
     }
     

四：圆角（border-radius: ; ）

1. border-radius: 50%;
   border-radius: 50px;
   

五：转化（transform: ;）

1. translate（元素移动位置 不会影响其他元素 ）

   • translateX

   • translateY

     	/* 相当于x轴和y轴 */
         transform: translate(100px,50px);
         /* 先对于x轴移动 */
        
         /* 先对于y轴移动 */
         transform: translateY(40px);
         /*取百分数 （相当于自身的50%） */
         transform: translateX(50%);
     

2. rotate（旋转 取正值时顺时针旋转 取负值逆时针旋转）

   .box4:hover{
       transform: rotate(-360deg);
       transition: 2s linear;
   }
   

   会呈现出转回去，然后再转回来的效果

   .box4{
       width: 200px;
       height: 100px;
       /* border: 1px solid; */
       /* background-color: red; */
       background-image: linear-gradient(to right,yellow,green);
       margin-top: 30px;
       /* transform: rotate(45deg); */
       transition: 6s;
   
   }
   .box4:hover{
       transform: rotate(-360deg);
       transition: 2s linear;
   }
   

3. scale（缩放 父元素被缩放，子元素也跟着被缩放）

   设置小于12px的字体

   • 例子

     <!--电影图片的缩放-->
      <style>
      	/* scale 缩放  父元素被缩放，子元素也跟着被缩放*/
         .box6{
             width: 200px;
             height: 250px;
             margin: 100px;
             background-size: 100% 100%;
             background-color: rgb(150, 101, 101);
             position: relative;
             background-image: url('./../img/12.jpg');
             background-size: 100% 100%;
             /* transform: scale(1,2); */
             overflow: hidden;
         }
         .box7{
            display: none;
            width: 200px;
            height: 100px;
            background-color: red;
            bottom: 0;
            position: absolute;
         }
         .box6:hover{
             transform: scale(1.2);
             background-size: 100% 100%;
             /* transition: 1s linear;  */
         }
         .box6:hover>.box7{
             display: inline;
        
     }
      </style>
     	<div class="box6">
             <div class="box7">
                 <ul>
                     <li>你好1</li>
                     <li>你好2</li>
                     <li>你好3</li>
                 </ul>
             </div>
         </div>
     

4. skew x轴 y轴的倾斜

   /* skew x轴 y轴的倾斜 */
   .box8{
       margin: 100px;
       width: 200px;
      height: 100px;
      background-color: red;
      /* x轴倾斜角度 */
      transform: skew(0deg,45deg);
      /* y轴倾斜角度 */
      transform: skew(45deg,0deg);
   }
   

六：Z-index(改变堆叠顺序)

​ 高的在上面，低的在下面

z-index:999;

七： opacity（透明度）

范围在：0-1