CSS：实现跳动小球蒙版效果

最新推荐文章于 2024-04-25 09:58:02 发布

KaiSarH

最新推荐文章于 2024-04-25 09:58:02 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/KaiSarH/article/details/105990361

CSS 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了使用CSS进行动画设计及网格布局的方法，通过具体代码示例展示了如何创建动态的圆形元素并应用动画效果，同时讲解了如何设置背景颜色、定位、动画延迟等属性。

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

运行效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #cbcbcb;
        }
        .main{
            height: 200px;
            width: 180px;
            display: grid;
            grid-template-columns: repeat(6,16.666%);
            grid-template-rows: repeat(1,100%);
            text-align: center;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
        .main span{
            position: absolute;
            font-size: 25px;
        }
        .main .main-circle-1{color:#00FFFF;left: 0;animation: move 1s ease-in-out infinite;animation-delay:0s;}
        .main .main-circle-2{color:#FF8C00;left: 16.6%;animation: move 1s ease-in-out infinite;animation-delay:0.1s;}
        .main .main-circle-3{color:	#FFD700;left: 33.3%;animation: move 1s ease-in-out infinite;animation-delay:0.2s;}
        .main .main-circle-4{color:#EE82EE;left: 50%;animation: move 1s ease-in-out infinite;animation-delay:0.3s;}
        .main .main-circle-5{color:#FF6347;left: 66.6%;animation: move 1s ease-in-out infinite;animation-delay:0.4s;}
        .main .main-circle-6{color:#40E0D0;left: 83.3%;animation: move 1s ease-in-out infinite;animation-delay:0.5s;}
        /*.main .main-circle-1{
            animation: move 1s ease-in-out infinite;
        }*/
        @keyframes move {
            0%{top: 80%}
            100%{top: 0}
        }
    </style>
</head>
<body>
<div class="main">
    <span class="main-circle-1">●</span>
    <span class="main-circle-2">●</span>
    <span class="main-circle-3">●</span>
    <span class="main-circle-4">●</span>
    <span class="main-circle-5">●</span>
    <span class="main-circle-6">●</span>
</div>
</body>
</html>