【前端从入门到精通：第九课：CSS3新增属性及伸缩盒布局】

无敌开心2024-07-10 12:31

弹性盒模型

介绍

伸缩盒模型也叫弹性盒模型，或flex。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建"自适应"浏览器窗口的流动布局。

flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。

目的

在浏览器窗口变化时，盒子相应改变大小。 设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。

display:flex 定义父容器是一个弹性盒。

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .one{
                width:980px;
                height: 500px;
                border:1px solid #ddd;
                margin: 20px auto;
                /*伸缩盒属性需要给容器设置*/
                display: flex;
            }
            .one>div{
                width: 400px;
                height: 300px;
                border:1px solid tomato;;
            }
        </style>
    </head>
    <body>
        <!--父容器-->
        <div class="one">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
    </body>
</html>

display:inline-flex 定义父容器时行内弹性盒

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .one{
                width:980px;
                height: 500px;
                border:1px solid #ddd;
                margin: 20px auto;
                /*伸缩盒属性需要给容器设置*/
                display: inline-flex;
            }
            .one>div{
                width: 400px;
                height: 300px;
                border:1px solid tomato;;
            }
        </style>
    </head>
    <body>
        a
        <!--父容器-->
        <div class="one">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
        a
    </body>
</html>

Justify-content 设置活检索弹性盒子元素在(主轴)方向上的对齐方式。

flex-start 默认值。项目位于容器的开头

flex-end 项目位于容器的结尾

center 项目位于容器的中心

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内。

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .one,.two,.three,.four{
                width:980px;
                height: 500px;
                border:1px solid #ddd;
                margin: 20px auto;
                /*伸缩盒属性需要给容器设置*/
                /*display: inline-flex;*/
                display: flex;
                /*设置主轴对齐方式*/
                /*设置结尾*/
                justify-content: flex-end;
            }
            .one>div,.two>div,.three>div,.four>div{
                width: 200px;
                height: 300px;
                border:1px solid tomato;;
            }
            .two{
                /*设置主轴居中*/
                justify-content: center;
            }
            .three{
                /*设置主轴两端对齐中间留有对应的空白*/
                justify-content: space-between;
            }
            .four{
                /*两端留有对应的空白 中间留有对应的空白*/
                justify-content: space-around;
            }
        </style>
    </head>
    <body>

        <!--父容器-->
        <div class="one">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
        <div class="two">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
        <div class="three">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
        <div class="four">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>

    </body>
</html>

align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式

stretch 默认值，项目被拉伸以适应容器

center 项目位于容器的中心

flex-start 项目位于容器的开头

flex-end 项目位于容器的结尾

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .one,.two,.three,.four{
                width:980px;
                height: 500px;
                border:1px solid #ddd;
                margin: 20px auto;
                /*伸缩盒属性需要给容器设置*/
                /*display: inline-flex;*/
                display: flex;
                /*设置主轴对齐方式*/
                /*设置结尾*/
                justify-content: flex-end;
                /*设置侧轴对齐方式 垂直(默认)*/
                align-items: flex-end;

            }
            .one>div,.two>div,.three>div,.four>div{
                width: 200px;
                height: 300px;
                border:1px solid tomato;;
            }
            .two{
                /*设置主轴居中*/
                justify-content: center;
                /*设置侧轴居中*/
                align-items: center;
            }
            .two>div:nth-child(2){
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .three{
                /*设置主轴两端对齐中间留有对应的空白*/
                justify-content: space-around;
                /*设置开头*/
                align-items: flex-start;
            }
            .four{
                /*两端留有对应的空白 中间留有对应的空白*/
                justify-content: space-around;
                /*默认的*/
                align-items: stretch;
            }
        </style>
    </head>
    <body>

        <!--父容器-->
        <div class="one">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
        <div class="two">
            <!--每一个被包含的就是一个项目-->
            <div>左</div>
            <div>中</div>
            <div>右</div>
        </div>
        <div class="three">
            <!--每一个被包含的就是一个项目-->
            <div>flex-start左</div>
            <div>中</div>
            <div>右</div>
        </div>
        <div class="four">
            <!--每一个被包含的就是一个项目-->
            <div>stretch左</div>
            <div>中</div>
            <div>右</div>
        </div>

    </body>
</html>

flex-direction 设置主轴的方向

row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。

row-reverse： 对齐方式与row相反。

column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。

column-reverse： 对齐方式与column相反。

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width: 980px;
                height: 800px;
                border: 1px solid #ddd;
                margin: 10px auto;
                display: flex;
                /*flex-direction:row-reverse ;*/
                /*设置纵轴为主轴*/
                /*flex-direction: column;*/
                /*flex-direction: column-reverse;*/
                flex-direction: column;
                /*设置纵轴的对齐方式*/
                justify-content: center;
                /*设置侧轴的对齐方式*/
                align-items: center;
            }
            .one>div{
                width: 200px;
                height: 200px;
                border: 1px solid tomato;
            }
        </style>
    </head>
    <body>
        <div class="one">
            <div>第一块</div>
            <div>第二快</div>
            <div>第三块</div>
        </div>
    </body>
</html>

flex-wrap 控制flex容器是单行或者多行。

nowrap： flex容器为单行。该情况下flex子项可能会溢出容器

wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse： 反转 wrap 排列。

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 980px;
            height: 500px;
            border: 1px solid #ddd;
            margin: 10px auto;
            display: flex;
            /*设置为多行*/
            /*flex-wrap: nowrap;*/
            flex-wrap:wrap;
            /*flex-wrap: wrap-reverse;*/
        }
        .one>div{
            width: 300px;
            height: 200px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div class="one">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

flex-flow:'flex-direction' || 'flex-wrap'

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 980px;
            height: 500px;
            border: 1px solid #ddd;
            margin: 10px auto;
            display: flex;
            /*设置为多行*/
            /*flex-wrap: nowrap;*/
            /*flex-wrap:wrap;*/
            /*flex-wrap: wrap-reverse;*/
            /*简写属性*/
            flex-flow: row-reverse wrap;

        }
        .one>div{
            width: 300px;
            height: 200px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div class="one">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

align-content 与align-items类似，主要用来调准伸缩行在伸缩容器里的对齐方式(多行时)

flex-start ：各行向伸缩容器的起点位置堆叠。

flex-end ：各行向伸缩容器的结束位置堆叠。

center ：各行向伸缩容器的中间位置堆叠。

space-between ：各行在伸缩容器中平均分布。

space-around ：各行在伸缩容器中平均分布，在两边各有一半的空间。

stretch ： align-content 的默认值，各行将会伸展以占用额外的空间。

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 980px;
            height: 500px;
            border: 1px solid #ddd;
            margin: 10px auto;
            display: flex;
            /*设置为多行*/
            /*flex-wrap: nowrap;*/
            flex-wrap:wrap;
            /*flex-wrap: wrap-reverse;*/
            /*简写属性*/
            /*flex-flow: row-reverse wrap;*/
            /*align-items: center;*/

            /*作用与align-items类似 适用于多行*/
            /*align-content: flex-start;*/
            /*align-content: flex-end;*/
            align-content: center;
            /*align-content: space-around;*/
            /*align-content: space-between;*/
            justify-content: space-between;
        }
        .one>div{
            width: 300px;
            height: 200px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div class="one">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

flex-grow:number 规定项目将相对于其他灵活的项目进行扩展的量。默认是0。

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width: 980px;
                height: 200px;
                border: 1px solid #ddd;
                margin: 10px auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .one>div{
                border: 1px solid tomato;
            }
            .one>div:first-child{
                flex-grow: 1;
            }
            .one>div:nth-child(2){
                flex-grow: 2;
            }
            .one>div:nth-child(3){
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div class="one">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

CSS3新增属性

浏览器私有前缀

-moz- Firefox

-webkit- chrome safari

-ms- IE

-o- Opear

作用

用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width:800px;
                height:300px;
                background:pink;
                display: flex;
                /*-webkit-display:flex;*/
                display: -o-flex;
                display: -webkit-flex;
                display: -moz-flex;
                display:-ms-flex;
                justify-content: space-between;
                -o-justify-content:space-between;
                -webkit-justify-content:space-between;
                -moz-justify-content:space-between;
                -ms-justify-content:space-between;
                -webkit-align-items: center;

            }
            .one>div{
                width:200px;
                height:200px;
                background:tomato;
            }
        </style>
    </head>
    <body>
        <div class="one">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

圆角、阴影、渐变

border-radius 圆角

border-radius:左上角水平 右上角水平 右下角水平 左下角水平 / 左上角垂直 右上角垂直 右下角垂直 左下角垂直

border-radius:4个角水平半径/4个角垂直半径

关于圆角的形成

从指定角的顶端向内部引出垂直半径和水平半径

将水平半径和垂直半径相较于元素内部的一点(圆心点)

以该点为圆心，指定的垂直半径和水平半径画圆或者椭圆

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width:100px;
                height:100px;
                border:1px solid #000;
                /*最完整格式：2个参数8个值*/
                /*border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;*/
                /*2个参数 4个值*/
                /*border-radius: 10px 20px / 10px 20px;*/
                /*1个参数 4个值*/
                /*border-radius: 10px 20px 30px 40px;*/
                /*1个参数 2个值*/
                /*border-radius: 10px 20px;*/
                /*1个参数 1个值*/
                /*border-radius: 10px;*/
                /*1个参数 3个值*/
                /*border-radius: 10px 20px 15px;*/
                /*border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;*/
                /*border-radius: 50px;*/
                /*border-radius: 50%;*/
                border-radius: 61px;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

圆角边框案例(太极)

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .tj{
                width: 100px;
                height: 50px;
                border:1px solid red;
                border-bottom:50px solid red;
                border-radius: 50%;
                position: relative;
            }
            .tj:before{
                width: 10px;
                height: 10px;
                background: #fff;
                content: ' ';
                border:20px solid red;
                position: absolute;
                top:25px;
                left:0px;
                border-radius: 50%;
            }
            .tj:after{
                width: 10px;
                height: 10px;
                background: red;
                content:" ";
                border:20px solid #fff;
                position: absolute;
                top:25px;
                right:0px;
                border-radius: 50%;
            }

        </style>
    </head>
    <body>
        <div class="tj"></div>
    </body>
</html>

阴影

盒子阴影 box-shadow：阴影1，阴影2......；

阴影格式:水平偏移位置 垂直偏移位置 模糊度 外延值 颜色 内置阴影；

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                font-size: 100px;
                text-shadow: -5px -5px 5px red,-10px -10px 5px orange;
            }
            .two{
                width:100px;
                height:100px;
                margin:50px;
                border:1px solid #000;
                border-radius: 50%;
                display: flex;
                align-items: center;
                /*box-shadow: 5px 5px red;*/
                /*box-shadow: 5px 5px 5px red;*/
                /*box-shadow: -5px 5px 5px red;*/
                /*box-shadow: 0px 0px 5px red;*/
                /*外延值*/
                /*box-shadow: 0px 0px 5px 10px red;*/
                /*内置阴影*/
                /*box-shadow: 0px 0px 5px 10px red inset;*/
                /*彩虹*/
                box-shadow: 0px 0px 5px 5px red,
                0px 0px 5px 10px orange,
                0px 0px 5px 15px yellow,
                0px 0px 5px 20px green;

            }
        </style>
    </head>
    <body>
        <div class="one">我是文字阴影</div>
        <div class="two">我是盒子阴影</div>
    </body>
</html>

文字阴影 text-shadow：阴影1，阴影2......；

阴影格式:水平偏移位置 垂直偏移位置 模糊度 颜色 ;

案例

css 复制代码 
```html
       <!DOCTYPE html>
       <html lang="en">
           <head>
               <meta charset="UTF-8">
               <title>Title</title>
               <style>
                   .one{
                       font-size: 100px;
                       text-shadow: -5px -5px 5px red,-10px -10px 5px orange;
                   }
               </style>
           </head>
           <body>
               <div class="one">我是文字阴影</div>
           </body>
       </html>
       ```

渐变

linear-gradients 线性渐变

css 复制代码 
/* 从上到下，蓝色渐变到红色 */ 

linear-gradient(blue, red); 

/* 渐变轴为45度，从蓝色渐变到红色 */ 

*linear-gradient(45deg, blue, red); 

/* 从右下到左上、从蓝色渐变到红色 */*

linear-gradient(to left top, blue, red); 

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*线性渐变*/
            .one{
                width: 200px;
                height: 200px;
                /*background: linear-gradient(to bottom,red,blue);*/
                /*background: linear-gradient(to top,red,blue);*/
                /*background: linear-gradient(to left,red,blue);*/
                /*background: linear-gradient(to right,red,blue);*/
                /*background-color:linear-gradient(to top,red,blue);*/
                /*background-image:linear-gradient(to right bottom,red,blue);*/
                background-image: linear-gradient(120deg,red,green,blue);
            }
        </style>
    </head>
    <body>
        <div class="one">线性渐变</div>
    </body>
</html>

  • radial-gradient 径向渐变

    CSS 复制代码 
    /*形状 大小 as 位置*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

  • shape 取值

    • ellipse(默认)：指定椭圆形的径向渐变
    • circle:指定圆形的径向渐变

  • size 取值

    • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
    • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
    • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
    • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

  • position 取值

    • center（默认）：设置中间为径向渐变圆心的纵坐标值。
    • top：设置顶部为径向渐变圆心的纵坐标值。
    • bottom：设置底部为径向渐变圆心的纵坐标值。
    • left:设置左为径向渐变圆心的纵坐标值。
    • right:设置右为径向渐变圆心的纵坐标值。
    • 也可使用百分比

  • 案例

css 复制代码 
 ```html
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
         <style>
             /*线性渐变*/
             .one{
                 width: 200px;
                 height: 200px;
                 /*background: linear-gradient(to bottom,red,blue);*/
                 /*background: linear-gradient(to top,red,blue);*/
                 /*background: linear-gradient(to left,red,blue);*/
                 /*background: linear-gradient(to right,red,blue);*/
                 /*background-color:linear-gradient(to top,red,blue);*/
                 /*background-image:linear-gradient(to right bottom,red,blue);*/
                 /*background-image: linear-gradient(120deg,red,green,blue);*/
                 background-image: repeating-linear-gradient(red 15%,green 20% ,blue 30%);
             }
             /*径向渐变*/
             .two{
                 width: 200px;
                 height: 200px;
                 border:1px solid #000;
                 margin: 50px;
                 /*background-image:radial-gradient(ellipse farthest-side,red,orange,blue);*/
                 /*background-image: radial-gradient(circle closest-corner at top,red,blue);*/
                 /*background-image: radial-gradient(circle closest-corner at left,red,blue);*/
                 /*background-image: radial-gradient(circle closest-corner at right,red,blue);*/
                 background-image: radial-gradient(circle closest-corner at 50% 50%,red,blue);
                 /*background-image: repeating-radial-gradient(circle at 50% 50%,red 10%,green 20%,blue 30%);*/
             }
         </style>
     </head>
     <body>
         <div class="one">线性渐变</div>
         <div class="two">径向渐变</div>
     </body>
 </html>

转换Transform

transform2D

translate(x,y) 2D转换转换

scale(x,z) 2D缩放

rotate(angle) 2D旋转

skew(x-angle,y-angle) 2D倾斜

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2D转换</title>
        <style>
            #box1,#box2,#box3{
                width: 200px;
                height: 200px;
                border:1px solid blue;
            }
            #box1:hover{
                /*transform: translateX(50px) translateY(50px);*/
                /*transform: translate(50px,100px);*/
                /*水平和垂直方向移动函数：translate,支持一个参数，代表水平移动*/
                transform: translate(50px);
            }
            #box2,#box4{
                width: 200px;
                height: 200px;
                border:1px solid tomato;
            }
            #box2:hover{
                /*transform: scaleX(0.5) scaleY(0.5);*/
                /*
                    支持一个参数，水平和垂直等于一个值
                    支持两个参数，代表水平方向缩放和垂直方向缩放
                */
                /*transform: scale(0.5);*/
                transform: scale(0.5,1.5);
            }
            /*过度*/
            #box3{
                transition: all 3s linear;
            }
            #box3:hover{
                transform: rotate(360deg);
            }
            /*倾斜*/
            #box4{
                transition: all 3s linear;
            }
            #box4:hover{
                /*transform: skewX(30deg) skewY(50deg);*/
                transform: skew(40deg,30deg);
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
    </body>
</html>

transform3D

translate3d(x,y,z) 定义3D转换

translateZ(z) 定义3D转换，只适用Z轴的值

scale3d(x,y,z) 定义3D缩放

scaleZ(z) 通过设置Z轴的值来定义3D缩放转换

rotate3d(x,y,z,angle) 定义3D旋转

rotateZ(angle) 定义沿着Z轴的3D旋转

perspective(n) 为D3转换元素定义透视视图

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .parent{
                width: 200px;
                height: 200px;
                background: pink;
                /*透视 呈现出伪3D*/
                perspective: 500px;
            }
            .son{
                width: 100%;
                height: 100%;
                background: blue;
                transform: translateZ(-100px);
                /*transform: translate3d(-10px,-10px,-100px);*/
                transition: all 3s;
            }
            .son:hover{
                transform: perspective(400px) scaleZ(1);
            }
            img{
                transition: all 3s;
            }
            img:hover{
                /*transform: rotate(180deg);*/
                transform: rotateZ(180deg);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="son"></div>
        </div>
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    </body>
</html>

过渡Transition

过渡指定四要素

transition-property 过渡属性，如background,color等。

transition-duration 过渡所需要时间。

transition-timing-function 过渡函数。既过渡的速度，方式等。

ease 默认值，规定慢速开始，然后变快，然后慢速结束过渡效果

linear 匀速

ease-in 规定以慢速开始，加速效果。

ease-out 规定以慢速结束，减速效果。

ease-in-out 规定以慢速开始和结束，先加速后减速效果。

transition-delay 过渡延迟时间。表示开始执行的时间。

transition 过渡属性简写属性

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: tomato;
            /*要过度的属性*/
            /*transition-property: width;*/
            /*!*过度完成时间*!*/
            /*transition-duration: 3s;*/
            /*!*过度函数*!*/
            /*transition-timing-function: ease;*/
            /*!*延时执行时间*!*/
            /*transition-delay: 3s;*/

            /*简写属性*/
            transition: all 3s linear;
        }
        #box:hover{
            width: 300px;
            height: 300px;
            transform: translate(3px,-10px);
            background: green;
            box-shadow: 0px 0px 10px 10px #ccc;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

动画animation

animation 属性用于控制动画

调用由@keyframes定义的动画

animation属性是一个简写属性

animation动画子属性

animation-name 调用动画，规定需要和keyframes的名字一致

animation-duration 动画完成一个周期所需要的时间

animation-timing-funtion 规定动画的速度变化类型

animation-delay 播放之前的延迟时间

Animation-iteration-count:数值|infinite 播放次数

infinite 表示无限次播放

animation-direction:normal|alternate 动画播放方向

normal 为默认值，表示正常播放

alternate 表示轮流播放，既动画会在奇数次正常播放，而在偶数次向后播放。

animation-fill-mode:forwards 动画停在最后一帧

默认值为none

animation-play-state:paused | running 属性规定动画正在运行还是停止

默认是为running

案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width:200px;
                height:200px;
                border: 1px solid #000;
                /*transition: background-color 3s linear;*/
            }
            .one:hover{
                /*background-color: red;*/
                /*background-color: green;*/
                /*background-color: blue;*/
            }
            .one{
                animation-name: myname;
                animation-duration: 5s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }
            @keyframes myname {
                0%{
                    background-color: red;
                }
                30%{
                    background-color: green;
                }
                60%{
                    background-color: blue;
                }
                100%{
                    background-color: red;
                }
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

动画案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            section{
                width: 500px;
                height: 300px;
                border:1px solid red;
                margin: 10px auto;
                overflow: hidden;
            }
            section>div{
                width: 2000px;
                height: 300px;
                border:1px solid tomato;
                animation: myname 10s infinite 1s;
            }
            section>div>img{
                width: 500px;
                height: 300px;
                float:left;
            }
            @keyframes myname {
                35%{
                    margin-left: -500px;
                }
                70%{
                    margin-left: -1000px;
                }
                100%{
                    margin-left: -1500px;
                }
            }
        </style>
    </head>
    <body>
        <section>
            <div>
                <img src="./img/1.png" alt="">
                <img src="./img/2.png" alt="">
                <img src="./img/1.png" alt="">
                <img src="./img/2.png" alt="">
            </div>
        </section>
    </body>
</html>

媒体查询

使用Media Query的基本语法

css 复制代码 
@media mediatype and | not | only (media feature) {
    CSS-Code
}
相关推荐
前端小小王22 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发32 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪1 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
荆州克莱2 小时前
mysql中局部变量_MySQL中变量的总结
spring boot·spring·spring cloud·css3·技术
ekskef_sef3 小时前
32岁前端干了8年，是继续做前端开发，还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue（四）
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js
dz88i84 小时前
修改npm镜像源
前端·npm·node.js
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍