2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

CSS实现省略号动画效果

时间:06-27来源:作者:点击数:20

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;
  • }
  • }
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门