2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码
我们经常看到的Loading加载很多都是转圈圈的那种，今天我们来换一种有创意的CSS3 Loading加载动画，一种是声波形状的动画，另一种是折线弯曲的动画，它们实现起来也非常简单，先来看看效果图：
看起来还挺特别的吧。。
另外你也可以在这里看到这个Loading动画的DEMO演示
接下来我们来看看如何用CSS3来实现这2款特别的Loading动画的。
首先是HTML代码，构造了2个Loading容器：
这是第一个：
<div style="height:80px;"></div> <!--colorful pulse-->
<div id="colorfulPulse">
<span class="item-1"></span>
<span class="item-2"></span>
<span class="item-3"></span>
<span class="item-4"></span>
<span class="item-5"></span>
<span class="item-6"></span>
<span class="item-7"></span>
</div>
这是第二个：
<div style="height:80px;"></div> <!--pulse wave-->
<div id="container">
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div> <h1>Loading...</h1> </div>
接下来就是核心CSS3代码，对于第一个，先是定义了7条竖线，然后对每条竖线应用名为scale的动画：
#colorfulPulse span {
display: inline-block;
width: 10px;
height: 40px;
animation-name: scale;
-webkit-animation-name: scale;
-moz-animation-name: scale;
-ms-animation-name: scale;
-o-animation-name: scale;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
-moz-animation-duration: 1.2s;
-ms-animation-duration: 1.2s;
-o-animation-duration: 1.2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
span.item-1 {
background: #2ecc71;
}
span.item-2 {
background: #3498db;
}
span.item-3 {
background: #9b59b6;
}
span.item-4 {
background: #e67e22;
}
span.item-5 {
background: #c0392b;
}
span.item-6 {
background: #e74c3c;
}
span.item-7 {
background: #e74c8c;
}
.item-1 {
animation-delay: -1s;
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-ms-animation-delay: -1s;
-o-animation-delay: -1s;
}
.item-2 {
animation-delay: -0.9s;
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-ms-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
}
.item-3 {
animation-delay: -0.8s;
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-ms-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
}
.item-4 {
animation-delay: -0.7s;
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-ms-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
}
.item-5 {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-ms-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
}
.item-6 {
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-ms-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
}
.item-7 {
animation-delay: -0.4s;
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-ms-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
}
@-webkit-keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}
20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}
20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-ms-keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}
20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}
20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
对于第二个Loading动画，也是定义了6条横线，对3条应用名为rise的动画，对另外3条应用名为fall的动画，另外对Loading文字应用名为fade的动画，从而达到波浪形的效果，具体CSS代码如下：
.stick:nth-child(n) {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Safari and Chrome */
-moz-transform: rotate(30deg);
-webkit-animation: fall 2s infinite;
-moz-animation: fall 2s infinite;
}
.stick:nth-child(2n) {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
/* Safari and Chrome */
-moz-transform: rotate(-30deg);
-webkit-animation: rise 2s infinite;
-moz-animation: rise 2s infinite;
}
@-webkit-keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
}
@-moz-keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
}
@-o-keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
@keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
}
}
@-webkit-keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(30deg);
}
}
@-moz-keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
}
@-o-keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(30deg);
}
@keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(30deg);
}
}
}
@-webkit-keyframes fade {
50% {
opacity: 0.5;
}
100% {
opacity:;
}
}
@-moz-keyframes fade {
50% {
opacity: 0.5;
}
100% {
opacity:;
}
}
@-o-keyframes fade {
50% {
opacity: 0.5;
}
100% {
opacity:;
}
@keyframes fade {
50% {
opacity: 0.5;
}
100% {
opacity:;
}
}
}
这样我们就完成了这个Loading动画，最后分享一下源代码，下载地址>>
2款不同样式的CSS3 Loading加载动画 附源码的更多相关文章
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- 【JavaScript】使用纯JS实现多张图片的懒加载（附源码）
一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...
- cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 原生JS+ CSS3创建loading加载动画；
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- CSS动画实例：Loading加载动画效果（一）
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
随机推荐
- java 对map排序
public static Map<String, String> sortMapByKey(Map<String, String> map) { if (map == nul ...
- 【原创】leetCodeOj --- Binary Tree Right Side View 解题报告
二连水 题目地址: https://leetcode.com/problems/binary-tree-right-side-view/ 题目内容: Given a binary tree, imag ...
- 银行家算法java实现
关于银行家算法的理论知识,课本或者百度上有好多资料,我就不再多说了,这里把我最近写的银行家算法的实现带码贴出来. 由于这是我们的一个实验,对系统资源数和进程数都指定了,所以这里也将其指定了,其中系统资 ...
- jQuery来源学习笔记：整体结构
1.1.由于调用一个匿名函数: (function( window, undefined ) { // jquery code })(window); 这是一个自调用匿名函数,第一个括号内是一个匿名函 ...
- ROM签名脚本[原创]
下面的代码是bash脚本来的.需要保存为*.sh后序. # !/bin/bash #usage: signapk.sh [-hs] [zipfile-unsigned | update.zip] #A ...
- IOS本地化应用
BK项目已完成7788,在项目的后期需要被翻译成多国语言版.为了适应全球多个国家使用多个存储. 应用本地化是分别对字符串.图片和 xib 或 storyboard 文件本地化,而传统的做法是对 xib ...
- atitit.设计模式(2) -----查询方式/ command 总结
atitit.设计模式(2) -----查询方式/ command 总结 1. 应用场景: 1 1. 代替一瓦if else 1 2. 建设api rpc风格的时候儿. 1 3. 菜单是Command ...
- [WPF]静态资源(StaticResource)和动态资源(DynamicResource)
一.文章概述 本演示介绍WPF基本采用静态和动态的资源.而且两者都做一个简单的比较. 静态资源(StaticResource)指的是在程序加载内存时对资源的一次性使用,之后就不再訪问这个资源了:动态资 ...
- 采用Sambaserver由win平台，linux平台上传文件
1.构造yum [root@db /]# cd /etc/yum.repos.d/ [root@db yum.repos.d]# vi yum.repo --改动光盘挂载位置,enabled设置为启动 ...
- jQuery Validate插入 reomte使用详细的说明
在用户注冊时常常要通过ajax请求推断用户账号是否已注冊,最方便的方法便是用jQuery Validate插件 reomte方法 Jquery Validate插件, 调用远程方法验证參数, remo ...