css3loading 状态4

总是忘记昵称

于 2016-06-22 16:46:32 发布

阅读量621

点赞数

分类专栏： css问题

本文链接：https://blog.youkuaiyun.com/huahuili/article/details/51735464

版权

css问题专栏收录该内容

16 篇文章

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .demo{width:100px; height: 100px; background: rgba(0,0,0,0.5); border-radius:10px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; text-align: center; line-height:100px;}
    .demo i{ display: inline-block; width: 5px; height: 5px; background: #eee; border-radius:50%; margin-right: 5px }
    .demo i:nth-child(1){animation:loadding-4 1.5s ease-in-out 0s infinite;}
    .demo i:nth-child(2){animation:loadding-4 1.5s ease-in-out .4s infinite;}
    .demo i:nth-child(3){margin-right: 0;animation:loadding-4 1.5s ease-in-out .8s infinite;}
    @keyframes loadding-4
    {
        0%{
            transform:scale(1);
        }
        60%{
            transform:scale(2);
        }
        100%{
            transform:scale(1);
        }
    }
    </style>
</head>
<body>
    <div class="demo">
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
</html>