其他代码
超酷 loading 加载动画CSS3特效
PetitQ
这是一款超酷 CSS3 loading 加载动画特效。该 loading 动画使用 CSS3CSS3 animation 动画来制作，它代码简单，效果非常的炫酷。
HTML 结构
使用一个<div>元素作为该 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;
}}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
