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

最新推荐文章于 2024-04-23 11:04:30 发布

Mi_Chong

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量511

点赞数

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

本文链接：https://blog.csdn.net/qq_31673689/article/details/78268037

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<!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>

Mi_Chong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS写的加载动画--圆球搜索加载动画

加载动画：循环运动的三个圆球，一边运动，一边变色，实现加载动画的效果 div div { width: 20px; height: 20px; background-color: red; /*画一个圆*/ -moz-
复制链接

扫一扫