CSS3 双向变小的圆球加载动画

2014-05-01 05:52:21 -0700

此代码仅供参考

代码说明

CSS3 双向变小的圆球加载动画

html代码

<style type="text/css">
body {
    background-color: #645cc1;
    text-align: center;
}
.spinner {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.spinner .ball {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
p {
    color: #fff;
    margin-top: 5px;
    font-family: sans-serif;
    letter-spacing: 3px;
    font-size: 10px;
}
@-webkit-keyframes motion {
    0% {
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
    25% {
        -webkit-transform: translateX(-50px) scale(0.3);
        transform: translateX(-50px) scale(0.3);
    }
    50% {
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
    75% {
        -webkit-transform: translateX(50px) scale(0.3);
        transform: translateX(50px) scale(0.3);
    }
    100% {
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
}
@keyframes motion {
    0% {
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
    25% {
        -webkit-transform: translateX(-50px) scale(0.3);
        transform: translateX(-50px) scale(0.3);
    }
    50% {
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
    75% {
        -webkit-transform: translateX(50px) scale(0.3);
        transform: translateX(50px) scale(0.3);
    }
    100% {
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
}
</style>

<div class="spinner">
    <div class="ball"></div>
    <p>LOADING</p>
</div>

代码演示

LOADING

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N