[TimLinux] CSS 实现加载中的动画

内容来自对《CSS世界》学习代码的理解简化：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}

@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}
</style>
</head>
<body>

<div>正在加载中<dot>...</dot></div>

</body>
</html>

 

posted @ 2018-09-07 17:03  TimLinux  阅读(182)  评论(0)  编辑  收藏  举报