纯CSS写的加载动画--圆球搜索加载动画

最新推荐文章于 2025-03-25 16:08:03 发布

Mi_Chong

最新推荐文章于 2025-03-25 16:08:03 发布

阅读量577

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签：动画 css

本文链接：https://blog.youkuaiyun.com/qq_31673689/article/details/78268037

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的加载动画案例。该动画通过循环运动及变色的三个圆球来模拟加载过程。详细展示了如何设置动画的关键帧以及如何为不同圆球设置不同的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加载动画：循环运动的三个圆球，一边运动，一边变色，实现加载动画的效果，效果如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>


        div div {
            width: 20px;
            height: 20px;
            background-color: red;
            /*画一个圆*/
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            position: relative;
            float: left;
        }

        #circle{
            animation: anim 2s infinite alternate;
        }

        #circle2{
            animation: anim2 2s infinite alternate;
        }
        #circle3{
            animation: anim3 2s infinite alternate;
        }
        @keyframes anim {
            0%{background: red;left:0px;top:0px}
            15%{background: orangered;left:20px;top:0px}
            35%{background: orange;left:40px;top:0px}
            50%{background: greenyellow;left:60px;top:0px}
            75%{background: yellow;left:80px;top:0px}
            85%{background: #FFF68F;left:100px;top:0px}
            100%{background: red;left:120px;top:0px}
        }

        @-webkit-keyframes anim {
            0%{background: red;left:0px;top:0px}
            15%{background: orangered;left:20px;top:0px}
            35%{background: orange;left:40px;top:0px}
            50%{background: greenyellow;left:60px;top:0px}
            75%{background: yellow;left:80px;top:0px}
            85%{background: #FFF68F;left:100px;top:0px}
            100%{background: red;left:120px;top:0px}
        }


        @keyframes anim2 {
            0%{background: #228B22;left:60px;top:0px}
            25%{background: #ADFF2F;left:60px;top:0px}
            50%{background: #FFD700;left:60px;top:0px}
            75%{background: yellow;left:60px;top:0px}
            100%{background: #EEE8AA;left:60px;top:0px}
        }

        @keyframes anim3 {
            100%{background: #A4D3EE;left:0px;top:0px}
            85%{background: #9F79EE;left:20px;top:0px}
            65%{background: #9F79EE;left:40px;top:0px}
            50%{background: #9A32CD;left:60px;top:0px}
            35%{background: #8B2252;left:80px;top:0px}
            15%{background: #8B2252;left:100px;top:0px}
            0%{background: #8B0000;left:120px;top:0px}
        }

        @-webkit-keyframes anim3 {
            100%{background: #A4D3EE;left:0px;top:0px}
            85%{background: #9F79EE;left:20px;top:0px}
            65%{background: #9F79EE;left:40px;top:0px}
            50%{background: #9A32CD;left:60px;top:0px}
            35%{background: #8B2252;left:80px;top:0px}
            15%{background: #8B2252;left:100px;top:0px}
            0%{background: #8B0000;left:120px;top:0px}
        }

    </style>
</head>
<body>

    <div style="width: 1300px;height: 40px;" align="center">

        <div id="circle">

        </div>
        <div id="circle2">

        </div>
        <div id="circle3">

        </div>

    </div>

</body>
</html>