[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>
上一篇:Tomcat启动报错:Failed to initialize end point associated with ProtocolHandler ["http-apr-8080"]


下一篇:第10章 文档对象模型DOM 10.3 Element类型