我想有一个省略号动画,并想知道是否可能与CSS动画…
所以它可能是
- Loading...
- Loading..
- Loading.
- Loading...
- Loading..
基本上只是继续这样。有任何想法吗?
解决方法
如何稍微修改版本的
@xec’s answer:
http://codepen.io/thetallweeks/pen/yybGra
HTML
添加到元素的单个类:
- <div class="loading">Loading</div>
CSS
使用步骤的动画。 See MDN docs
- .loading:after {
- overflow: hidden;
- display: inline-block;
- vertical-align: bottom;
- -webkit-animation: ellipsis steps(4,end) 900ms infinite;
- animation: ellipsis steps(4,end) 900ms infinite;
- content: "\2026"; /* ascii code for the ellipsis character */
- width: 0px;
- }
- @keyframes ellipsis {
- to {
- width: 20px;
- }
- }
- @-webkit-keyframes ellipsis {
- to {
- width: 20px;
- }
- }