纯css实现预加载动画

纯css实现预加载动画，增加用户体验度

css代码：

dot{
	display: inline-block;
	height: 1em;
	line-height: 1;
	text-align: left;
	vertical-align: -.15em;
	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);
	}
}

html代码：

<span>正在加载<dot>...</dot></span>

转载于:https://www.cnblogs.com/zj1024/p/8831148.html