C3 粒子闪烁效果

最新推荐文章于 2024-06-19 11:05:25 发布

Marchanges

最新推荐文章于 2024-06-19 11:05:25 发布

阅读量528

点赞数

分类专栏：样式

本文链接：https://blog.csdn.net/u014452812/article/details/78491311

版权

样式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闪烁</title>
    <style>
        body {
            background-color: #000;
        }
        .bim-flash-circle {
            width: 10px;
            height: 10px;
            position: absolute;
            left: 50%;
            top: 50%;
        }
        .bim-flash-circle1,
        .bim-flash-circle2,
        .bim-flash-circle3 {
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -10px 0 0 -10px;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #fff;
        }
        .bim-flash-circle1 {
            -webkit-animation: circle 3s linear infinite;
            animation: circle 3s linear infinite;
        }
        .bim-flash-circle2 {
            -webkit-animation: circle 3s linear 0.8s infinite;
            animation: circle 3s linear 0.8s infinite;
        }
        .bim-flash-circle3 {
            -webkit-animation: circle 3s linear 1.6s infinite;
            animation: circle 3s linear 1.6s infinite;
        }
        @-webkit-keyframes circle {
            from {
                opacity: 1;
                -webkit-transform: scale(0);
            }
            to {
                opacity: 0;
                -webkit-transform: scale(3);
            }
        }
    </style>
</head>
<body>
    <div class="bim-flash-circle">
        <div class="bim-flash-circle1"></div>
        <div class="bim-flash-circle2"></div>
        <div class="bim-flash-circle3"></div>
    </div>
</body>
</html>

Marchanges

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C3 粒子闪烁效果

闪烁 body { background-color: #000; } .bim-flash-circle { width: 10px; height: 10px; position: absolute; left: 50
复制链接

扫一扫

专栏目录