首页 技术 正文

2款不同样式的CSS3 Loading加载动画 附源码

技术 2022年11月7日
0 收藏 310 点赞 527 浏览 5646 个字

原文: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动画，最后分享一下源代码，下载地址>>

点赞 310

贡献者

上一篇： CSS动画实例：Loading加载动画效果（一）
下一篇： HTML5 五彩圆环Loading加载动画实现教程
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：9,084
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,559
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,408
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,181
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：7,818
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：4,901
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
44
收藏
0
人气
137,995
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页