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

本文介绍了一个使用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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值