这是一款使用CSS3制作的波形loading动画特效。这组波形loading动画特效共有11种波形动画，分别使用不同的CSS3 animation动画来实现。

使用方法

在页面中引入style.css文件。

HTML结构

每一个loading动画都是由一个

元素包裹10个子

元素组成。

CSS样式

loading动画的通用样式如下：

[class^="shaft-load"] {

margin: 50px auto;

width: 60px;

height: 30px;

}

[class^="shaft-load"] > div {

float: left;

background: #893878;

height: 100%;

width: 5px;

margin-right: 1px;

display: inline-block;

}

实现第一种波形动画的CSS样式如下：

[class^="shaft-load"] .shaft1 {

-webkit-animation-delay: 0.05s;

-moz-animation-delay: 0.05s;

-o-animation-delay: 0.05s;

animation-delay: 0.05s;

}

/* Shaft 1 */

.shaft-load > div {

background-color: #5d8341;

-webkit-animation: loading 1.5s infinite ease-in-out;

-moz-animation: loading 1.5s infinite ease-in-out;

-o-animation: loading 1.5s infinite ease-in-out;

animation: loading 1.5s infinite ease-in-out;

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px);

}

@-webkit-keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

@-moz-keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

@-o-keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

@keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

其它loading动画效果请参考下载文件。

HTML显示波形,CSS3波形loading动画特效相关推荐

  1. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com

  2. CSS3实现Loading动画特效

    查看效果: http://hovertree.com/texiao/css3/43/ 代码如下: <!DOCTYPE html> <html> <head>< ...

  3. jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）

    这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...

  4. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  5. 9款超绚丽的HTML5/CSS3应用和动画特效

    HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...

  6. loading窗口动画 web_分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  7. html5 loading游戏,12种炫酷html5 svg加载loading动画特效

    12种炫酷html5 svg加载loading动画特效 刘振兴 代码分享 2015年11月23日 14182 3条评论 这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...

  8. html 载入效果,HTML5 Loading动画特效集锦

    本文作者html5tricks,转载请注明出处 以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为 1.HTML5 Canvas发光 ...

  9. html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码

    效果图 各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...

最新文章

  1. mysql乐观锁总结和实践
  2. Exchange Server 2003多服务器安装以及管理工具介绍
  3. 美国旧金山之行第一天
  4. wxDrawjs循环添加图形后增加标识记录点击的是哪个的另类方法
  5. IOS 手机助手及越狱助手推荐
  6. 680. 验证回文字符串 Ⅱ
  7. (3)Spring框架----Bean实例化的几种方式对比
  8. ad13批量安装元件库_AD18元件库下载及导入方法
  9. 谷歌地图的级别与对应比例尺及分辨率探究
  10. java 文件流下载pdf
  11. 如何使用移动端后台管理数据
  12. 反意疑问句及其回答用法归纳+习题讲解
  13. java添加java_home环境变量_如何正确设置jdk环境变量JAVA_HOME？
  14. python row_python – 用于getrow的Scipy稀疏矩阵替代()
  15. Git(2)-Git常用的操作和概念
  16. -XX:+PrintHeapAtGC参数使用了解
  17. x390yoga 关掉触控屏幕_八代酷睿变形金刚：ThinkPad X390 Yoga变形本带你飞
  18. 182_赵陈雄_java核心编程实验
  19. go(gin框架)session底层使用redis实现(gorilla/sessions和gin-contrib/sessions)
  20. 旧电脑没有usb boot 启动选项，有没有光驱如何重装系统。

热门文章

  1. 经典卷积神经网络的学习（三）—— Inception Net
  2. 计算机的组成 —— PCI（PCIE）、PCB
  3. GNU/Linux jpg、png、gif 与 eps 格式的相互转换
  4. python程序-30分钟学会用Python编写简单程序
  5. python画散点图-python画时间序列散点图
  6. python读音检测-python – 一个音符的录音音频会产生多个发音时间
  7. python编程入门电子书-Python编程从入门到实践PDF电子书
  8. python入门经典代码-Python入门经典
  9. python儿童入门视频-Python入门视频课程
  10. python基础教程电子版-Python基础教程（第2版）PDF文档下载