CSS3小特效之加载动画效果

凡看书不为书所愚始善

加载动画效果

很多情况下，我们需要一个加载动画作为调用数据时的小特效，用来美化我们的页面！今天，就学习练习写一个这样的好看的加载动画！

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载动画效果</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="box">
    	<div class="loading">
            <span>Loading...</span>
       	</div>
    </div>
</body>
</html>

CSS代码如下

*{
    margin: 0;
    padding: 0;
}
.box{
    /*设置窗体颜色*/
    background-color: #2980b9;
    /*设置body的高为全窗口*/
    height: 100vh;
    /*弹性布局让元素居中显示*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    /*将正方形div变为一个圆环，宽为10px，只显示顶部*/
    border-radius: 50%;
    border-top: 10px solid #f1c40f;
    position: relative;
    /*给圆环添加一个旋转动画*/
    animation: rotate1 2s linear infinite;
}
/*利用::before和::after添加灵位两个边框，形成一整个封闭的圆环*/
.loading::before,.loading::after{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: -10px;
    box-sizing: border-box;
    border-radius: 50%;
}
.loading::before{
    border-top: 10px solid #9b59b6;
    transform: rotate(120deg);
}
.loading::after{
    border-top: 10px solid #2ecc71;
    transform: rotate(240deg);
}
.loading span{
    position: absolute;
    width: 200px;
    height: 200px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 200px;
    animation: rotate2 2s linear infinite;
}
@keyframes rotate1 {
    to{
        transform: rotate(360deg);
    }
}
/*给span添加一个反向旋转的动画，正好让内容'Loading...'看起来不旋转，但是能跳动*/
@keyframes rotate2 {
    to{
        transform: rotate(-360deg);
    }
}

效果如下

images