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


Posted in HTML / CSS onApril 21, 2016

先看看效果图:

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

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.    positionabsolute;     
  13.    top: 0;     
  14.    content'';     
  15.  }     
  16.  #loader1:before {     
  17.    left: -1.5em;     
  18.  }     
  19.  #loader1 {     
  20.    text-indent: -9999em;     
  21.    margin50px 50px;     
  22.    positionrelative;     
  23.    floatleft;     
  24.    font-size11px;     
  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.   

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

HTML / CSS 相关文章推荐
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 #HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 #HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 #HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 #HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 #HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 #HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 #HTML / CSS
You might like
php,ajax实现分页
2008/03/27 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python3 logging日志封装实例
2020/04/08 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
"引用"与多态的关系
2013/02/01 面试题
幼儿园教师教学反思
2014/02/06 职场文书
导师推荐信范文
2014/05/09 职场文书
环保建议书200字
2014/05/14 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
委托书的写法
2014/09/16 职场文书
房屋租赁协议书
2014/10/18 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
HttpClient实现表单提交上传文件
2022/08/14 Java/Android