超酷CSS3 loading加载动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 超酷CSS3 loading加载动画特效
超酷CSS3 loading加载动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-25
    阅读:
简要教程

这是一款超酷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;
    }
}  
                

网友评论