css+js实现多色粒子圆点散列分布放大动画效果代码

代码语言:html

所属分类:粒子

代码描述:css+js实现多色粒子圆点散列分布放大动画效果代码

代码标签: 粒子 圆点 散列 分布 放大 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .p {
          position: absolute;
          width: 100px;
          height: 100px;
          color: inherit;
          background-color: currentColor;
          border-radius: 50%;
          border: 1px solid currentColor;
          -webkit-animation: blast 3s infinite ease-in;
                  animation: blast 3s infinite ease-in;
        }
        
        .p1 {
          -webkit-animation-delay: -5;
                  animation-delay: -5;
        }
        
        .p2 {
          -webkit-animation-delay: -5.5s;
                  animation-delay: -5.5s;
        }
        
        .p3 {
          -webkit-animation-delay: -6s;
                  animation-delay: -6s;
        }
        
        .p4 {
          -webkit-animation-delay: -6.5s;
                  animation-delay: -6.5s;
        }
        
        .p5 {
          -webkit-animation-delay: -7s;
                  animation-delay: -7s;
        }
        
        .p6 {
          -webkit-animation-delay: -7.5s;
                  animation-delay: -7.5s;
        }
        
        body {
          background-color: black;
          /*   filter: blur(1px); */
          -webkit-animation: color 20s infinite;
                  animation: color 20s infinite;
        }
        
        @-webkit-keyframes color {
          0% {
            color: red;
          }
          33% {
            color: green;
          }
          66% {
            color: blue;
          }
          100% {
            color: red;
          }
        }
        
        @keyframes color {
          0% {
            color: red;
          }
          33% {
            co.........完整代码请登录后点击上方下载按钮下载查看

网友评论0