发光加载环动画-纯CSS动画效果-如何创建CSS3旋转预加载器（参照https://www.bilibili.com/video/BV1V4411C7z5?from=search&seid=9

时间:2020-05-07 颜若笑叻人气:1

//css部分    
body{
    margin: 0;
    padding: 0;
    background: #262626;
}
.ring{
 position: absolute;    
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 150px;
 height: 150px;
 background: transparent;
 border: 3px solid #3c3c3c;
 border-radius: 50%;
 text-align: center;
 line-height: 150px;
 font-family: sans-serif;
 font-size: 20px;
 color: #fff000;
 letter-spacing: 4px;
 text-transform: uppercase;
 text-shadow: 0 0 10px #FFF000;
 box-shadow: 0 0 20px rgba(0,0,0,.5);
}
    
.ring:before{
    content: "";
    position: absolute;
    top:-3px;
    left:-3px;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #FFF000;
    border-right: 3px solid #FFF000;
    border-radius: 50%;
    animation: animateCricle 2s linear infinite;
}
    
span{
    display: block;
    position:absolute;
    top:calc( 50% - 2px );
    left: 50%;
    width:50%;
    height: 4px;
    background: transparent;
    transform-origin: left;
    animation: animate 2s linear infinite;
    
}
    
span:before{
    content: "";
    position: absolute;
    width:16px;
    height: 16px;
    border-radius: 50%;
    background: #FFF000;
    top:-6px;
    right: -8px;
    box-shadow: 0 0 20px #FFF000;
    
}
    
    @keyframes animateCricle
    {
        0%{
            transform: rotate(0deg);    
        }
        100%{
            transform: rotate(360deg);
        }
    }
@keyframes animate
{
    0%{
        transform: rotate(45deg);    
    }
    100%{
        transform: rotate(405deg);
    }
}

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>预加载</title>
        <link rel="stylesheet" type="text/css" href="demo1.css">
    </head>
    <body>
        <div class="ring">
            Loading
            <span></span>
        </div>
    </body>
</html>

加载全部内容