css3 加载动画

最新推荐文章于 2024-07-24 10:22:02 发布

码页面

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量204

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ministech/article/details/79941281

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>loading</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .loading{
        position: fixed;
        top:0;
        bottom:0;
        left:0;
        right: 0;
        width:100%;
        background: #ccc;
    }
    .loading .box{
        position: relative;
        top: -50px;
        width:200px;
        height: 100px;
        margin: 50vh auto 0;
    }
    .loading .box i{
        height:100px;
        width:10px;
        margin-left:10px;
        background: red;
        display: inline-block;
        transform: scaleY(0.4);
        animation: loading 2s  infinite;
    }
    //设置延时
    .loading .box i:nth-child(2){
        animation-delay:0.1s;
    }
    .loading .box i:nth-child(3){
        animation-delay:0.2s;
    }
    .loading .box i:nth-child(4){
        animation-delay:0.3s;
    }
    .loading .box i:nth-child(5){
        animation-delay:0.4s;
    }
    @keyframes loading{
        0%,40%,100%{
            transform: scaleY(0.4);
        }
        20%{
            transform: scaleY(1);
        }
    }
</style>
</head>
<body>
    <div class="loading">
        <div class="box">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>