C3 粒子闪烁效果

来源：互联网发布：等离子数控切割机编程编辑：程序博客网时间：2024/05/16 10:08
<!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>
阅读全文
0 0