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


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

使用方法

 音频波形Loading动画

HTML结构

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

1 2 3 4 5 6 7 <div id="preloader_1">     <span></span>     <span></span>
    <span></span>     <span></span>     <span></span> </div>
CSS样式

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 #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>元素,每一个代表一个圆形/矩形。

1 2 3 4 5 6 <div id="preloader_2">     <span></span>     <span></span>
    <span></span>     <span></span> </div>
CSS样式

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
#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.5
s 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.5
s 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属性来实现。

1 <div id="preloader_3"></div>
CSS样式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 #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.5
s 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属性来实现。

1 2 3 4 5 6 7 <div id="preloader_4">     <span></span>     <span></span>
    <span></span>     <span></span>     <span></span> </div>
CSS样式

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
43 44 #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伪元素来制作两条旋转线效果。

1 <div id="preloader_5"></div>
CSS样式


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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 #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(0
deg);}     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代表一个方块。

1 2 3 4 5 6 <div id="preloader_6">     <span></span>     <span></span>
    <span></span>     <span></span> </div>
CSS样式


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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
#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); } }

技术
©2019-2020 Toolsou All rights reserved,
TP6验证器的使用示例及正确验证数据自宣布投资比特币以来 特斯拉市值蒸发逾2000亿美元华为认证HCIA-AI人工智能Java基础(冒泡排序)IAR安装使用教程GDOI2019 游记关于过年PYTHON入门期末复习汇总蚂蚁集团董事长井贤栋安抚员工:公司终究会上市的王者荣耀背景故事整合