css发光圆圈loading加载动画效果代码-html代码-BFW代码库

css发光圆圈loading加载动画效果代码

代码语言：html

代码描述：css发光圆圈loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body
    {
        margin: 0;
        padding: 0;
        background: #060606;
    }
    .loader 
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 200px;
        height: 200px;
        box-sizing: border-box;
    }
    .loader .face
    {
        position: absolute;
        border: 2px solid #121212;
    }
    .loader .face.face1
    {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #090909;
        box-shadow: 0 0 10px rgba(0,0,0,1);
        border-radius: 50%;
        border-left: 2px solid #ffff00;
        border-top: 2px solid #ffff00;
        animation: animate 3s linear infinite;
    }
    .loader .face.face2
    {
        top: 30px;
        left: 30px;
        right: 30px;
        bottom: 30px;
        background: #090909;
        box-shadow: 0 0 10px rgba(0,0,0,1);
        border-radius: 50%;
        border-right: 2px solid #03a9f4;
        border-bottom: 2px solid #03a9f4;
        animation: animate 3s linear reverse infinite;
    
    }
    .loader .face .circle
    {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 2px;
        transform-origin: left;
    }
    .loader .face.face1 .circle
    {
        transform: rotate(-45deg);
    }
    .loader .face.fa.........完整代码请登录后点击上方下载按钮下载查看