CSS3实现加载中效果

最新推荐文章于 2021-08-03 21:11:24 发布

Travelling1006

最新推荐文章于 2021-08-03 21:11:24 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/talentzemin/p/5919860.html

版权

代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>loading</title>
    <style>
        body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100vh; }
        .Loader { height: 30px; width: 90px; position: relative; }
            .Loader .Bar { background: #04C096; height: 0; position: absolute; bottom: 0; width: 10px; border-radius: 2px; }
                .Loader .Bar:nth-child(0) { left: -15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0s; animation: bottom-top 2s infinite ease-in-out 0s; }
                .Loader .Bar:nth-child(1) { left: 0px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.2s; animation: bottom-top 2s infinite ease-in-out 0.2s; }
                .Loader .Bar:nth-child(2) { left: 15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.4s; animation: bottom-top 2s infinite ease-in-out 0.4s; }
                .Loader .Bar:nth-child(3) { left: 30px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.6s; animation: bottom-top 2s infinite ease-in-out 0.6s; }
                .Loader .Bar:nth-child(4) { left: 45px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.8s; animation: bottom-top 2s infinite ease-in-out 0.8s; }
                .Loader .Bar:nth-child(5) { left: 60px; -webkit-animation: bottom-top 2s infinite ease-in-out 1s; animation: bottom-top 2s infinite ease-in-out 1s; }
                .Loader .Bar:nth-child(6) { left: 75px; -webkit-animation: bottom-top 2s infinite ease-in-out 1.2s; animation: bottom-top 2s infinite ease-in-out 1.2s; }

        @-webkit-keyframes bottom-top {
            0% { height: 0; opacity: 0; }
            50% { height: 30px; opacity: 1; }
            100% { height: 0; opacity: 0; }
        }

        @keyframes bottom-top {
            0% { height: 0; opacity: 0; }
            50% { height: 30px; opacity: 1; }
            100% { height: 0; opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="Loader">
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
    </div>
</body>
</html>

来源：http://codepen.io/jackoliver/pen/ORpQBv

转载于:https://www.cnblogs.com/talentzemin/p/5919860.html

Travelling1006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现加载中效果

代码：<!doctype html><html><head> <meta charset="utf-8" /> <title>loading</title> <style> body { display: -webkit-box; displ...
复制链接

扫一扫