CSS3网格布局、过渡及2D效果

网格布局

容器属性

开启网格
- display
  - grid
  - inline-grid
划分行列
- 划分行------grid-template-rows
- 划分列------grid-template-columns
- 属性值
  1. 绝对大小
    - grid-temple-rows：50px 50px 20px
  2. 百分比
    - grid-temple-rows：30% 30% 30%
  3. 功能函数 repreat(重复的次数，重复的数值)
    - grid-temple-rows：repeat(3,15%)
  4. auto-fill关键字
    - 自动填充，配合功能函数repreat使用
      - grid-temple-rows：repeat(auto-fills,76.23)
  5. fr关键字
    - 片段划分
      - grid-template-rows：100px 1fr 3fr 1fr 35px
      - grid-template-columns：repeat(7,1fr)
  6. minmax()功能函数
    - 设置范围
      - 100px 100px minmax(150px，300px)
  7. auto自动填充
    - grid-template-rows：100px 100px auto
单元格间距
- 单一属性
  - grid-row-gap
    - 行间距
  - grid-column-gap
    - 列间距
- 复合属性
  - grid-gap
    - 行间距列间距
  - 注意
    - 新版可以省略grid-
项目排列顺序
- grid-auto-flow
  - row------默认值
  - column
单元格内容对齐
- 单一属性
  - justify-items
  - align-items
- 复合属性
  - place-items---值1 值2
单元格项目对齐
- 单一属性
  - justify-content
  - align-content
- 复合属性
  - place-content---值1 值2

项目属性

如上图所示，共十二列五行，每一列的分割线从左到右排序分别为1~13，每一行的分割线从上到下排序分别为1~6

grid-colume------合并行

属性值------所合并的行的上面的线的序号/所合并的行的下面的线的序号

gird-row------合并列

属性值------所合并的列的左面的线的序号/所合并的列的右面的线的序号

eg：如果要合并上图第一二列所有的网格

gird-colume:1/3;

gird-row:1/6;

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            margin: 80px auto;
            width: 1000px;
            height: 300px;
            display: grid;
            grid-template-rows: repeat(4,1fr);
            grid-template-columns: repeat(13,1fr);
            gap:10px;
        }
        .con div{
            background: #e27d71;
            
        }
        .div1{
            grid-column: 1/3;
            grid-row: 2/3;
        }
        .div2{
            grid-column: 1/3;
            grid-row: 3/5;
        }
        .div3{
            grid-column: 6/9;
            grid-row: 2/4;
        }
        .div4{
            grid-column: 10/12;
            grid-row: 1/2;
        }
        .div5{
            grid-column: 12/14;
            grid-row: 1/3;
        }
        .div6{
            grid-column: 12/14;
            grid-row: 4/5;
        }
    </style>
</head>
<body>
    <div class="con">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
    <div class="div8"></div>
    <div class="div9"></div>
    <div class="div10"></div>
    <div class="div11"></div>
    <div class="div12"></div>
    <div class="div13"></div>
    <div class="div14"></div>
    <div class="div15"></div>
    <div class="div16"></div>
    <div class="div17"></div>
    <div class="div18"></div>
    <div class="div19"></div>
    <div class="div20"></div>
    <div class="div21"></div>
    <div class="div22"></div>
    <div class="div23"></div>
    <div class="div24"></div>
    <div class="div25"></div>
    <div class="div26"></div>
    <div class="div27"></div>
    <div class="div28"></div>
    <div class="div29"></div>
    <div class="div30"></div>
    <div class="div31"></div>
    <div class="div32"></div>
    <div class="div33"></div>
    <div class="div34"></div>
    <div class="div35"></div>
    <div class="div36"></div>
    <div class="div37"></div>
    <div class="div38"></div>
    </div>

</body>
</html>

效果图如下：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/config.css">
    <style>
        .con{
            width: 296px;
            height: 426px;
            display: grid;
            grid-template-rows: 32px 86px 40px 65px 89px 38px;
            grid-template-columns: 95px 1fr 95px;
            gap: 14px;
            margin: 50px auto;
        }
     
        .div1{
            grid-column: 1/4;
            grid-row:1/2 ;
            background: #8fd8f9;
        }
        .div2{
            grid-column: 2/4;
            grid-row:2/4 ;
            background: #f8cc4a;
        }
        .div3{
            grid-column: 1/2;
            grid-row:3/5 ;
            background: #c9e1a7;
        }
        .div4{
            grid-column: 2/4;
            grid-row:4/5;
            background: #aaabad;
        }
        .div5{
            grid-column: 1/3;
            grid-row:5/6;
            background: #89cfa7;
        }
        .div6{
            grid-column: 3/4;
            grid-row:5/6;
            background: #f0d4e0;
        }
        .div7{
            grid-column: 1/4;
            grid-row:6/7;
            background: #f1af6a;
        }
        .div8{
            background: #e0d7e8;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
        <div class="div7"></div>
        <div class="div8"></div>
    </div>
</body>
</html>

效果图如下：

过渡

单一属性
- transition-property_过度的属性
  - all------默认值
  - 所有css3属性
- transition-duration------过渡持续的时间
  - 属性值为数字，单位为s
  - 默认值为0
- transition-delay------延迟执行的时间
  - 属性值为数字，单位为s
  - 默认值为0
- transition-timing-function------过度的动画类型
  - linear------匀速
  - ease------逐渐慢下来------默认值
  - ease-in------加速
  - ease-out------减速
  - ease-in-out------先加速后减速
  - bezier------贝塞尔曲线
  - step()------步幅
复合属性
- transition
  - 属性值
    - 过度属性持续时间延迟时间过渡类型
      - eg：all 5s 3s linear
    - 可以简写------1s
      - 只有持续时间，其他使用默认值

2D效果

transform

平移------translate
- 属性值为数字，单位为px
旋转------rotate
- 属性值为数字，单位为deg
缩放------scale
- 属性值为数字，没有单位
倾斜------skew
- 属性值为数字，单位为deg

以上属性值均可给负数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul:hover li{ background: blue; width: 1500px; color: #fff;

复制代码

     }
     li{
         width: 200px;
         height: 100px;
         margin-top: 20px;
         background: aqua;
         transition-property: all;
         transition-duration: 10s;
     }
     ul:hover :nth-child(1){
         transition-timing-function: linear;
     }
     ul:hover :nth-child(2){
         transition-timing-function: ease;
     }
     ul:hover :nth-child(3){
         transition-timing-function: ease-in;
     }
     ul:hover :nth-child(4){
         transition-timing-function: ease-out;
     }
     ul:hover :nth-child(5){
         transition-timing-function: ease-in-out;
     }
     ul:hover :nth-child(6){
         transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
     }
     ul:hover :nth-child(7){
         transition-timing-function: steps(8);
     }
     img{
         width: 100px;
         height: 140px;
         display: block;
         margin: 350px auto 0;
         transition: 2s;
         
     }
     img:hover{
        transform:   translate(100px) rotate(1080deg) scale(3) skew(45deg);

     }
 </style>

</head> <body>

linear匀速
ease逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
bezier贝塞尔曲线
steps()步幅

</body> </html>