css3动画-4点唤醒

最新推荐文章于 2024-08-17 14:58:02 发布

li3196672779

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量198

点赞数

分类专栏： Css3效果

Css3效果专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: #000;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;

            /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
            animation: aa 0.99s infinite linear;
        }
        @keyframes aa {
            0% {
                box-shadow: 3em 2em 0 1em #FCC, 6em 2em 0 0.5em #9F9, 9em 2em 0 0 #CCF, 12em 2em 0 -0.5em #F7F;
            }
            25% {
                box-shadow: 3em 2em 0 0.5em #FCC, 6em 2em 0 0 #9F9, 9em 2em 0 -0.5em #CCF, 12em 2em 0 1em #F7F;
            }
            50% {
                box-shadow: 3em 2em 0 0 #FCC, 6em 2em 0 -0.5em #9F9, 9em 2em 0 1em #CCF, 12em 2em 0 0.5em #F7F;
            }
            75% {
                box-shadow: 3em 2em 0 -0.5em #FCC, 6em 2em 0 1em #9F9, 9em 2em 0 0.5em #CCF, 12em 2em 0 0 #F7F;
            }
            100% {
                box-shadow: 3em 2em 0 1em #FCC, 6em 2em 0 0.5em #9F9, 9em 2em 0 0 #CCF, 12em 2em 0 -0.5em #F7F;
            }
        }
    </style>
</head>
<body>
    <div class="load">
        Loading
    </div>
</body>
</html>