简要教程
这是一款超酷css3 loading加载动画特效。该loading动画使用css3css3 animation动画来制作，它代码简单，效果非常的炫酷。
使用方法
html结构
使用一个dc6dce4a544fdca2df29d5ac0ea9906b元素作为该loading动画的容器，里面有两个子元素。其中div.loading-1是loading进度条。div.loading-2是loading文字。
<div class="loader">
<div class="loading-1"></div>
<div class="loading-2">loading...</div>
</div>
css样式
该loading动画中使用了3个animation动画，第一个load动画是用于进度条从0运动到100%。第二个turn动画用于进度条在y轴方向上旋转。第三个bounce动画用于文字的弹跳。
.loader {
width: 150px;
margin: 50px auto 70px;
position: relative;
}
.loader .loading-1 {
position: relative;
width: 100%;
height: 10px;
border: 1px solid #69d2e7;
border-radius: 10px;
animation: turn 4s linear 1.75s infinite;
}
.loader .loading-1:before {
content: "";
display: block;
position: absolute;
width: 0%;
height: 100%;
background: #69d2e7;
box-shadow: 10px 0px 15px 0px #69d2e7;
animation: load 2s linear infinite;
}
.loader .loading-2 {
width: 100%;
position: absolute;
top: 10px;
color: #69d2e7;
font-size: 22px;
text-align: center;
animation: bounce 2s linear infinite;
}
@keyframes load {
0% {
width: 0%;
}
87.5%, 100% {
width: 100%;
}
}
@keyframes turn {
0% {
transform: rotatey(0deg);
}
6.25%, 50% {
transform: rotatey(180deg);
}
56.25%, 100% {
transform: rotatey(360deg);
}
}
@keyframes bounce {
0%,100% {
top: 10px;
}
12.5% {
top: 30px;
}
}
以上就是超酷css3 loading加载动画特效的内容。