zoukankan html css js c++ java

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

查看全文

相关阅读:
Manacher算法
 [SCOI2010]生成字符串
 [HNOI2008]GT考试
 矩阵乘法
 关于主席树
 Spring 书籍
 Spark书籍
 TimeMeasure
Dynamic login
Image quality evaluation

原文地址：https://www.cnblogs.com/timlinux/p/9605862.html