用CSS3制作Loading加载动画
程序员文章站
2022-03-18 20:17:46
...
常用的Loading加载动画，都是调用动态图去实现的，但是想要CSS样式去把静态的图实现可以加载的动画就要使用到animation，要控制animation的运动时间，以及到多少秒时才开始运动，运动效果到某一刻时要显示或者隐藏运动等等；
下面是html源代码，见截图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3发光Loading加载动画DEMO演示</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="bg">
<div class="loading">
<span class="title">正在连接VDK...</span>
<span class="text1">连接成功...</span>
</div>
</div>
</div>
<script src='jquery.js'></script>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
下面是CSS样式的源代码，也是Loading加载动画的特效；
见截图：
@-webkit-keyframes title {
0% {
opacity: 0;
right: 130px;
}
48% {
opacity: 0;
right: 130px;
}
52% {
opacity: 0;
right: 30px;
}
70% {
opacity: 1;
right: 30px;
}
100% {
opacity: 0;
right: 30px;
}
}
@-moz-keyframes title {
0% {
opacity: 0;
right: 130px;
}
48% {
opacity: 0;
right: 130px;
}
52% {
opacity: 0;
right: 30px;
}
70% {
opacity: 0;
right: 30px;
}
100% {
opacity: 0;
right: 30px;
}
}
@-webkit-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes bg {
0% {
background-color: #306f99;
}
50% {
background-color: #19470f;
}
90% {
background-color: #734a10;
}
}
@-moz-keyframes bg {
0% {
background-color: #306f99;
}
50% {
background-color: #19470f;
}
90% {
background-color: #734a10;
}
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
right: -21px;
}
45% {
opacity: 1;
right: 80px;
}
50% {
opacity: 0;
right: -21px;
}
51% {
right: -21px;
}
55% {
opacity: 1;
}
60% {
opacity: 0;
}
65% {
opacity: 1;
}
70% {
opacity: 0;
}
75% {
opacity: 1;
}
80% {
opacity: 0;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
right: -21px;
}
95% {
opacity: 1;
right: 80px;
}
96% {
right: -21px;
}
100% {
opacity: 0;
right: -21px;
}
}
@-moz-keyframes blink {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
right: -21px;
}
45% {
opacity: 1;
right: 80px;
}
50% {
opacity: 0;
right: -21px;
}
51% {
right: -21px;
}
55% {
opacity: 1;
}
60% {
opacity: 0;
}
65% {
opacity: 1;
}
70% {
opacity: 0;
}
75% {
opacity: 1;
}
80% {
opacity: 0;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
right: -21px;
}
95% {
opacity: 1;
right: 80px;
}
96% {
right: -21px;
}
100% {
opacity: 0;
right: -21px;
}
}
body {
font-family: arial;
background: black;
color: #eaf7ff;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
margin-left: -80px;
margin-top: -40px;
}
.bg {
padding: 30px 30px 30px 0;
background: #306f99;
-moz-animation: bg 1.5s linear infinite;
-webkit-animation: bg 1.5s linear infinite;
animation: bg 1.5s linear infinite;
-moz-box-shadow: inset 0 0 45px 30px black;
-webkit-box-shadow: inset 0 0 45px 30px black;
box-shadow: inset 0 0 45px 30px black;
}
.loading {
position: relative;
text-align: right;
text-shadow: 0 0 6px #bce4ff;
height: 20px;
width: 150px;
}
.loading span {
display: block;
text-transform: uppercase;
position: absolute;
right: 30px;
height: 20px;
width: 200px;
line-height: 20px;
}
.loading span:after {
content: "";
display: block;
position: absolute;
top: -2px;
right: -21px;
height: 20px;
width: 16px;
background: #eaf7ff;
-moz-box-shadow: 0 0 15px #bce4ff;
-webkit-box-shadow: 0 0 15px #bce4ff;
box-shadow: 0 0 15px #bce4ff;
-moz-animation: blink 3.4s infinite;
-webkit-animation: blink 3.4s infinite;
animation: blink 3.4s infinite;
}
.loading span.title {
-moz-animation: title 3.4s linear infinite;
-webkit-animation: title 3.4s linear infinite;
animation: title 3.4s linear infinite;
}
.loading span.text1 {
animation: title 3.4s linear 1.7s infinite;
opacity: 0;
}
这是加载Loading的时候，也是切换状态。用animation制作要控制在切换状态的时的时间
才能加载出自己想要的效果。由于动态图是无法演示出来的，所以只能看代码了。
上一篇： css loading动画实现
下一篇： 记一种页面loading动画实现套路