字符点点点loading效果

所属分类：网站建设

使用方法：html使用示意：订单提交中...

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; /* 也可以是white-space: pre */

animation: dot 3s infinite step-start both;

}

@keyframes dot {

33% { transform: translateY(-2em); }

66% { transform: translateY(-1em); }

}