css实现打点动画

写loading时有时需要在后面连续的出现一个点、两个点、三个点，实现方式有很多种，js、css皆有，今天分享看到的一种css实现方式。效果如下

代码如下：

            .btn {padding: 4px 12px;border: 1px solid #ff4d4f;background-color: #ff4d4f;border-radius: 2px;color: #ffffff;font-size: 14px;}.dot {display: inline-block;height: 1em;line-height: 1;overflow: hidden;vertical-align: -.25ex;}.dot::after {display: block;content: '...\A..\A.';white-space: pre-wrap;animation: dotframes 3s infinite step-start both;}@keyframes dotframes {33% {transform: translateY(-2em);}66% {transform: translateY(-1em);}}

说明：

• ex: 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

• \A: 换行符

• white-space： pre-wrap，空白符会被保留，直到遇到换行符

html：

 加载中

PS: 用mac自带的录屏软件录制后转为gif后动画变慢了^_

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！