php设置加载动画,超酷CSS3 loading加载动画特效

简要教程

这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作，它代码简单，效果非常的炫酷。

使用方法

HTML结构

使用一个

元素作为该loading动画的容器，里面有两个子元素。其中div.loading-1是loading进度条。div.loading-2是loading文字。

Loading...

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加载动画特效的内容，更多相关内容请关注PHP中文网(www.php.cn)！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！