CSS3——制作正在加载页面loading...

今天做了好多小东西，还挺开心的~
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>正在加载中...</title>

    <style type="text/css">

        .box{

            width:300px;

            height:125px;

            border:1px solid #000;

            margin:200px auto 0;

        }

        .box p{

            text-align: center;

            width:100%;

            float:left;

            /*p标签默认有样式*/

            margin:0;

            padding:0;

        }

        .box div{

            width:30px;

            height:70px;

            margin:15px;

            float: left;

            background-color: hotpink;

            border-radius:10px;

        }

        .box div:nth-child(1){

            background-color: lightcoral;

            /*缩、放 这是两次，所以是2*/

            /*animation:loading 0.5s ease 0s 2 alternate;*/

            animation: loading 0.5s ease 0s infinite alternate;

        }

        .box div:nth-child(2){

            background-color: darkorange;

            animation: loading 0.5s ease 0.1s infinite alternate;

        }

        .box div:nth-child(3){

            background-color: lightcoral;

            animation: loading 0.5s ease 0.2s infinite alternate;

        }

        .box div:nth-child(4){

            background-color: gold;

            animation: loading 0.5s ease 0.3s infinite alternate;

        }

        .box div:nth-child(5){

            background-color: burlywood;

            animation: loading 0.5s ease 0.4s infinite alternate;

        }

        @keyframes loading{

            from{

                /*缩放y轴*/

                transform:scaleY(1)

            }

            to{

                transform: scaleY(0.5);

            }

        }

    </style>

</head>

<body>

    <div class="box">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <p>loading...</p>

    </div>

</body>

</html>
成品展示：
是不是还萌萌哒~
巴特西

CSS3——制作正在加载页面loading...

最新文章

热门文章
