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实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
德生S2000电路分析
2021/03/02 无线电
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
AngularJS语法详解
2015/01/23 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
大学毕业感言
2014/01/10 职场文书
家长会主持词
2014/03/26 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
副总经理任命书
2014/06/05 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
论文答谢词
2015/01/20 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Go语言测试库testify使用学习
2022/07/23 Golang