UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

6种CSS3加载动画

所属分类：其他,UI-动画效果,加载

 87675  589  查看评论 (14)
分享到微信朋友圈
X
6种CSS3加载动画 ie兼容10
 查看演示  立即下载

实现方法

这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。

使用方法

 音频波形Loading动画

HTML结构

使用5个空的<span>元素，每一个代表一条波形柱子。

<div id="preloader_1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

音频波形Loading动画效果通过使每一条音频波形柱子的高度从5像素变化到30像素来完成。每一个span元素都被沿Y轴向下移动15像素，使动画动中心开始。

#preloader_1{
    position:relative;
}
#preloader_1 span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#9b59b6;
    position:absolute;
    animation: preloader_1 1.5s  infinite ease-in-out;
}  
#preloader_1 span:nth-child(2){
    left:11px;
    animation-delay: .2s;  
}
#preloader_1 span:nth-child(3){
    left:22px;
    animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
    left:33px;
    animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
    left:44px;
    animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

通过分别为每一个span元素设置0.2秒的animation-delay动画延迟时间，使它们依次产生高度变化的动画效果。

 圆形变矩形Loading动画

HTML结构

圆形变矩形Loading动画使用4个空的<span>元素，每一个代表一个圆形/矩形。

<div id="preloader_2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

该loading指示器动画通过修改border-radius属性来实现。

#preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; }
#preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; position: absolute; }
#preloader_2 span:nth-child(1) { animation: preloader_2_1 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; }
 @-keyframes preloader_2_1 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius:20px;
background:#3498db;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
}
@-keyframes preloader_2_2 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(20px) translateY(-10px) rotate(180deg);
border-radius:20px;
background:#f1c40f;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
}
@-keyframes preloader_2_3 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius:20px;
background:#2ecc71;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
}
 @-keyframes preloader_2_4 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius:20px;
background:#e74c3c;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
}

 交叉图形变换Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

<div id="preloader_3"></div>

CSS样式

#preloader_3{
    position:relative;
}
#preloader_3:before{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#9b59b6;
    animation: preloader_3_before 1.5s infinite ease-in-out;
}
  
#preloader_3:after{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#2ecc71;
    left:22px;
    animation: preloader_3_after 1.5s infinite ease-in-out;
} 
@keyframes preloader_3_before {
    0% {transform: translateX(0px) rotate(0deg)}
    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    0% {transform: translateX(0px)}
    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
    100% {transform: translateX(0px)}
}

 蛇形Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

<div id="preloader_4">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

该动画通过修改每一个span元素的Y轴位置，使它们下移10个像素，并使它们的颜色从蓝色变为黄色。阴影效果则是修改box-shadow的尺寸来完成。

#preloader_4{
    position:relative;
}
#preloader_4 span{
    position:absolute;
    width:20px;
    height:20px;
    background:#3498db;
    opacity:0.5;
border-radius:20px;
    -animation: preloader_4 1s infinite ease-in-out;
  
}
#preloader_4 span:nth-child(2){
    left:20px;
    animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
    left:40px;
    animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
    left:60px;
    animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
    left:80px;
    animation-delay: .8s;
}
@keyframes preloader_4 {
    0% {
      opacity: 0.3; 
      transform:translateY(0px);    
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {
      opacity: 1; 
      transform: translateY(-10px); 
      background:#f1c40f;  
      box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {
      opacity: 0.3; 
      transform:translateY(0px); 
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}

 旋转轮盘Loading动画

HTML结构

该loading动画使用div元素来制作中心的圆形，并使用div元素的:after伪元素来制作两条旋转线效果。

<div id="preloader_5"></div>

CSS样式

两条旋转线使用:after伪元素来制作，通过给它设置50像素的顶部和底部border-radius俩创建这两条线。动画效果添加在div元素上，修改它的颜色以及通过transform: rotate()来使它进行旋转。

#preloader5{
    position:relative;
    width:30px;
    height:30px;
    background:#3498db;
    border-radius:50px;
    animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
    position:absolute;
    width:50px;
    height:50px;
    border-top:10px solid #9b59b6;
    border-bottom:10px solid #9b59b6;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-radius:50px;
    content:'';
    top:-20px;
    left:-20px;
    animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

 windows标志Loading动画

HTML结构

每一个span代表一个方块。

<div id="preloader_6">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

所有的方块以网格进行布局。动画添加在主div元素上，使它产生旋转。另外i一个动画是使各个span元素不断的从100%缩放到50%。并通过animation-delay来控制各个span的动画延迟时间。

#preloader_6{
    position:relative;
    width: 42px;
    height: 42px;
    animation: preloader_6 5s infinite linear;
}
#preloader_6 span{
    width:20px;
    height:20px;
    position:absolute;
    background:red;
    display:block;
    animation: preloader_6_span 1s infinite linear;
}
#preloader_6 span:nth-child(1){
  background:#2ecc71;
}
#preloader_6 span:nth-child(2){
  left:22px;
  background:#9b59b6;
  animation-delay: .2s;
}
#preloader_6 span:nth-child(3){
  top:22px;
  background:#3498db;
  animation-delay: .4s;
}
#preloader_6 span:nth-child(4){
  top:22px;
  left:22px;
  background:#f1c40f;
  animation-delay: .6s;
}
@keyframes preloader_6 {
    from {-ms-transform: rotate(0deg);}
    to {-ms-transform: rotate(360deg);}
}
@keyframes preloader_6_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}
相关插件-动画效果,加载
查看更多

3D标签云滚动插件

 3D标签云，小修改气泡云随着鼠标方向滚动
  动画效果
 43169  407

jQuery点赞+1动画效果

 一款基于jQuery+CSS3实现的点赞+1动画效果，非常实用
  动画效果
 54399  521

three.js 创建 多面立方体

 基于three.js 创建6面立方体模型 可旋转添加动画
  动画效果
 27712  313

蝴蝶3D效果

 HTML5制作逼真蝴蝶天空飞舞动画特效
  动画效果
 51462  853

讨论这个项目（14）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?? ??? ?? 0
    2021/8/25 20:03:17
    鼎嘉鼎嘉鼎 0
    2018/12/31 10:52:24
    非常感谢！！！ 回复
    TzzHmm 0
    2017/12/26 15:16:17

    就冲石家庄老乡就用你了

    回复
    念念不忘 0
    2017/11/8 9:36:18
    怀念的间隔° 0
    2017/8/22 9:22:42
    Rubycui 0
    2017/8/7 11:04:04
    pupunew 0
    2017/4/26 13:44:05
    ⌒⊥⌒ 0
    2017/4/17 11:55:43
    这鱼?儿咸 0
    2017/4/12 21:08:06
    --Supernova-- 0
    2017/4/5 9:53:13
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复