动画实例

HTML

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

CSS

span {display: inline-block;height: 1em;line-height: 1;text-align: left;vertical-align: -0.25em;/* 属性设置元素的垂直对齐方式。指定为负长度，可以使元素降低 */overflow: hidden;}span::before{display: block;content: '...\A..\A.';white-space: pre-wrap;/* 保留空白符序列 */animation: span 3s infinite step-start both;}@keyframes span{33%{ transform: translateY(-2em); }66%{ transform: translateY(-1em); }}