CSS的布局机制与动画_css 能用相对布局实现元素的动画吗-CSDN博客

本文链接：https://blog.csdn.net/Ann1223/article/details/107827860

布局
1.display属性
inline
block
inline-block

2.浮动
float: right/left
脱离默认文档流
1.不会遮挡文字
2. 行内元素可以设置宽高
块级元素不会独占一行

3.定位布局position

1.static静态布局
2.absolute绝对浮动

脱离默认文档流
不占据定位前空间
默认情况下以body左上角为基准
父辈具有定位属性时，以父辈的的左上角为基准

3.relative相对定位
4.fixed 固定定位
5.sticky：粘滞定位
配合属性：right left top bottom

4.伸缩盒布局
display：flex

设置完伸缩盒p则会撑满div

默认情况下p不撑满div

2.浮动属性失效

flex-direction:row/row-reverse
flex-wrap:wrap/none
简写：flex-flow：row wrap

align-items： flex-start
flex-end
center

justify-content: flex-start
flex-end
center
space-around
space-between

flex:number ——占父级剩余发空间的份数

#伸缩盒更适合写手机端页面

动画animation

1.先定义动画轨迹
@keyframes 关键帧

@keyframes 轨迹名称{
    from {
        开始位置的样式
    }
    to{
        结束位置的样式
    }
}
@keyframes 轨迹名称{
    0%{}
    50%{}
    75%{}
    100%{}
}

2.元素执行轨迹
div{
animation-name:轨迹名称
}

   animation-timing-function :设置动画速度
    ease
    ease-in
    ease-out
    ease-in-out
    linear
    steps(3)

轮播图实例

<!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>
        div.outer{
            width: 1920px;
            height: 420px;
            overflow: hidden;
            margin: 0 auto;
        }
        div.move{
            width: 11520px;
            height: 420px;
            animation-name: move;
            animation-timing-function: steps(6);
            animation-iteration-count: infinite;
            animation-duration: 20s;
        }
        div.move div{
            float: left;
            width: 1920px;
            height: 420px;
        }
        div.move>img{
            width: 1920px;
            height: 420px;
        }
        @keyframes move{
            from{
                margin-left:0px ;
            }
            to{
                margin-left: -11520px;
            }
        }
    </style>
</head>
<body>
    <div class="outer">
       <div class="move">
        <div><img src="./images/轮播图/asset 54.webp" alt=""></div>
        <div><img src="./images/轮播图/asset 56.webp" alt=""></div>
        <div><img src="./images/轮播图/asset 57.webp" alt=""></div>
        <div><img src="./images/轮播图/asset 58.webp" alt=""></div>
        <div><img src="./images/轮播图/asset 59.webp" alt=""></div>
        <div><img src="./images/轮播图/asset 60.webp" alt=""></div>
       </div>
    </div>
</body>
</html>

拓：.ico的修改

     1.去转换一个ico格式图标
        16px*16px

    2. 在当前html中引入图标
    <link rel="shortcut icon" type='images/-icon' href="">

呼吸灯实例

    呼吸灯 一共10s 
    1.外圆
         1扩大10px
         2缩小10px
         3保持不动
    2.内圆
         1.外圆扩大的同时，内圆缩小10px
         2.外圆缩小的同时，内圆扩大10px
         3.内圆缩小12px
         4.内圆扩大12px

<!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>
        *{
            box-sizing: border-box;
        }
        div.article{
            width: 200px;
            height: 300px;
            background-color: black;
            margin: 0 auto;
        }
        div.top{
            width: 100%;
            height: 200px;
            padding: 20px;
            animation-name: outer;
            animation-iteration-count: infinite;
            animation-timing-function:linear;
            animation-duration: 5s;
            
        }
        div.bottom{
            width: 100%;
            color: white;
            text-align: center;
        }
        div.outer{
            width:100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid white;
            padding: 20px;
            animation-name: inner;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite ;
        }
        div.inner{
            width:100% ;
            height: 100%;
            border-radius: 50%;
            border: 3px solid rgb(216, 216, 86);
        }
        @keyframes outer{
            25%{
                padding:10px;
            }
            50%{
                padding:30px;
            }
            100%{
                padding:20px
            }
        }
        @keyframes inner{
            25%{
                padding: 30px;
            }
            50%{
                padding: 20px;
            }
            75%{
                padding:32px;
            }
            100%{
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="article">
        <div class="top">
            <div class="outer">
                <div class="inner"></div>
            </div>
        </div>
        <div class="bottom">
            <h3>HI!</h3>
        </div>
    </div>
</body>
</html>