• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

CSS3绘制超炫的上下起伏波动进度加载动画

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

先看看效果图：

CSS Code复制内容到剪贴板
  1. #loader1,     
  2. #loader1:before,     
  3. #loader1:after {     
  4.    background: #f2fa08;     
  5.    -webkit-animation: load1 1s infinite ease-in-out;     
  6.    animation: load1 1s infinite ease-in-out;     
  7.    width: 1em;     
  8.    height: 4em;     
  9.  }     
  10.  #loader1:before,     
  11.  #loader1:after {     
  12.    position: absolute;     
  13.    top: 0;     
  14.    content: '';     
  15.  }     
  16.  #loader1:before {     
  17.    left: -1.5em;     
  18.  }     
  19.  #loader1 {     
  20.    text-indent: -9999em;     
  21.    margin: 50px 50px;     
  22.    position: relative;     
  23.    float: left;     
  24.    font-size: 11px;     
  25.    -webkit-animation-delay: 0.16s;     
  26.    animation-delay: 0.16s;     
  27.  }     
  28.  #loader1:after {     
  29.    left: 1.5em;     
  30.    -webkit-animation-delay: 0.32s;     
  31.    animation-delay: 0.32s;     
  32.  }     
  33.  @-webkit-keyframes load1 {     
  34.    0%,     
  35.    80%,     
  36.    100% {     
  37.      box-shadow: 0 0 #f2fa08;     
  38.      height: 4em;     
  39.    }     
  40.    40% {     
  41.      box-shadow: 0 -2em #f2fa08;     
  42.      height: 5em;     
  43.    }     
  44.  }     
  45.  @keyframes load1 {     
  46.    0%,     
  47.    80%,     
  48.    100% {     
  49.      box-shadow: 0 0 #f2ff08;     
  50.      height: 4em;     
  51.    }     
  52.    40% {     
  53.      box-shadow: 0 -2em #f2ff08;     
  54.      height: 5em;     
  55.    }     
  56.  }     
  57.   

以上就是本文的全部内容，希望对大家的学习有所帮助。

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
深入理解css属性的选择对动画性能的影响发布时间：2022-06-21
下一篇：
CSS3实现大小不一的粒子旋转加载动画发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap