css3loading 状态4

来源：互联网发布：阿里云怎么建设网站编辑：程序博客网时间：2024/05/21 17:08

这里写图片描述

<!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>

0 0