前端用css3动画绘制一个绿色的加载球

程序员文章站 2024-01-23 22:17:58

...

话不多说，还是看效果！

前端用css3动画绘制一个绿色的加载球

下面是代码，很简单！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3黄色加载球效果</title>
    <style>

        .nn{
            width: 200px;
            height: 200px;
            background-color: lawngreen;
            border-radius:50%;
            margin:100px auto;
            position:relative;
        }
        .nn::before{
            content:"";
            width: 400px;
            height: 400px;
            position:absolute;
            top:-100%;
            left:-50%;
            background-color: rgba(255,255,255,.6);
            display:block;;
            border-radius:40%;
            animation: on_before 10s linear infinite;
        }
        @keyframes on_before {
            0%{
                transform:translateY(0px) rotate(0deg)
            }
            100%{
                transform:translateY(-200px) rotate(360deg)
            }
        }
        @keyframes on_after {
            0%{
                transform:translateY(0px) rotate(0deg)
            }
            100%{
                transform:translateY(-200px) rotate(30deg)
            }
        }
        .nn::after{
            content:"";
            width: 400px;
            height: 400px;
            background-color: rgba(255,255,255,1);
            display:block;;
            border-radius:46%;
            position:absolute;
            top:-100%;
            left:-50%;
            animation: on_after 10s linear infinite;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="nn"></div>
</div>
</body>
</html>

上一篇： is和==

下一篇：利用 CSS3 实现一个转动立体六边形 <二>