学习《css世界》笔记之loading三点动画效果

动画实例

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); }
			}