CSS实现省略号动画效果
上代码:
- <div class="loadpos">等待支付中</div>
CSS部分:
- .loadpos{
-
- width: 220px;
-
- font-size: 24px;
-
- font-weight: 500;
-
- color: rgba(0,0,0,0.88);
-
- line-height: 33px;
-
- }
-
- .loadpos: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: 1.25em;
-
- }
-
- }
-
- @-webkit-keyframes ellipsis {
-
- to {
-
- width: 1.25em;
-
- }
-
- }