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 相关文章推荐
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 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+MySQL修改记录的方法
2015/01/21 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python实现猜数游戏
2020/03/27 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
迪奥官网:Dior.com
2018/12/04 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
人力资源行政经理自我评价
2013/10/23 职场文书
表彰大会策划方案
2014/05/13 职场文书
运动会口号8字
2014/06/07 职场文书