粒子秘密

下载代码

html

css

分享到微信朋友圈

html

<stop offset=".1" stop-color="hsla(180, 100%, 50%,.8)">
          <animate id="anim" attributeName="offset" calcMode="ease-in-out" begin="0s" dur="7s" values="0;pow(9,2);pow(99,2)" keitimes="0;0.5;1" repeatCount="1" />
        </stop>
        
        <stop offset="0" stop-color="hsla(0, 35%, 50%,1)" stop-opacity=".8">
          <animate attributeName="offset" calcMode="ease-in-out" begin="7s" dur="7s" values="1;0.1;1" keitimes="0;1;0" repeatCount="1" />

</stop>
        
        <stop stop-color="hsl(248, 76%, 56%)" stop-opacity=".8">
          <animate attributeName="offset" calcMode="ease-in-out" begin="14s" dur="7s" values="0;1;2" keitimes="0;1;0" repeatCount="indefinite" />
        </stop>
        
        <stop stop-color="hsla(32, 35%, 30%,1)" stop-opacity=".2">
          <animate attributeName="offset" calcMode="linear" begin="21s" dur="7s" values=".95;.80;.60" keitimes="0;1;0" repeatCount="1" />

</stop>
        
        <stop offset="0.8" stop-color="hsla(175, 43%, 53%,.9)">
          <animate attributeName="stop-opacity" calcMode="linear" begin="0s" dur="20s" values="0;1;0" keitimes="0;pow(9,2);1" repeatCount="1" />
        </stop>
      </radialGradient>
      <radialGradient id="rgB" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="80">
        <stop offset="50%" stop-opacity="0.2" />
        <stop offset="150%" stop-opacity="0.9" />
      </radialGradient>

</defs>
    <circle id="circ" cx="100" cy="100" r="200" fill="url(#rgA)" />
    <circle id="circ2" cx="100" cy="100" r="200" fill="url(#rgB)" />
  </svg>
</div>

css

body {
  height: 100vh;
  width: 100vw;
  background: black;
  overflow: hidden;
}

svg {
  height: 60%;
  width: 45%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 100%;
  z-index: 1;
  opacity: .6;
  -webkit-animation: rang 15s ease-in-out infinite alternate;
          animation: rang 15s ease-in-out infinite alternate;
}

@-webkit-keyframes rang{ 
100% { -webkit-transform: translate(-50%,-50%) 
  rotateZ(-360deg); transform: translate(-50%,-50%) 
  rotateZ(-360deg);}
}

@keyframes rang{ 
100% { -webkit-transform: translate(-50%,-50%) 
  rotateZ(-360deg); transform: translate(-50%,-50%) 
  rotateZ(-360deg);}
}

canvas {
  position: absolute;
  border-radius: 100%;
  height: 55%;
  width: 55%;
  top: 0;
  left: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
   -webkit-animation: ring 150s ease-in-out infinite alternate;
           animation: ring 150s ease-in-out infinite alternate;
}

@-webkit-keyframes ring{ 
100% { -webkit-transform: translate(-50%,-50%) 
  rotateZ(-360deg); transform: translate(-50%,-50%) 
  rotateZ(-360deg);}
}

@keyframes ring{ 
100% { -webkit-transform: translate(-50%,-50%) 
  rotateZ(-360deg); transform: translate(-50%,-50%) 
  rotateZ(-360deg);}
}

#canv {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: rong 100s ease-in-out infinite ;
          animation: rong 100s ease-in-out infinite ;
}

@-webkit-keyframes rong{
100% { -webkit-transform: translate(-50%,-50%) 
  rotateZ(80deg); transform: translate(-50%,-50%) 
  rotateZ(80deg);}
}

@keyframes rong{
100% { -webkit-transform: translate(-50%,-50%) 
  rotateZ(80deg); transform: translate(-50%,-50%) 
  rotateZ(80deg);}
}

#r,
#b,
#b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  z-index: 3;
}

#r {
  -webkit-animation: 7s hsla(0, 20%, 50%, .6) linear infinite;
          animation: 7s hsla(0, 20%, 50%, .6) linear infinite;
  background-image: radial-gradient(100% 90%, circle contain, rgba(0, 75, 218, .55), rgba(0, 75, 218, 0) 100%);

}

#b {
  -webkit-animation: hsla(90, 10%, 100%, .2) 5s linear infinite;
          animation: hsla(90, 10%, 100%, .2) 5s linear infinite;
  background-image: radial-gradient(50% 50%, circle contain, rgba(90, 173, 223, .45), rgba(90, 173, 223, 0) 100%);
}

#g {
  -webkit-animation: hsla(0, 20%, 100%, .2) 1s linear infinite;
          animation: hsla(0, 20%, 100%, .2) 1s linear infinite;
  background-image: radial-gradient(50% 50%, circle contain, rgba(180, 222, 12, .5), rgba(180, 222, 12, 0) 100%);
}

@-webkit-keyframes red {
  0% {
    -webkit-transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1, 1);
            transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1, 1);
  }
  50% {
    -webkit-transform: rotate(-180deg) translate(-40px) rotate(-180deg) scale(-1, 4.33);
            transform: rotate(-180deg) translate(-40px) rotate(-180deg) scale(-1, 4.33);
  }
  100% {
    -webkit-transform: rotate(-360deg) translate(-40px) rotate(-360deg) scale(1, -10);
            transform: rotate(-360deg) translate(-40px) rotate(-360deg) scale(1, -10);
  }
}

@keyframes red {
  0% {
    -webkit-transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1, 1);
            transform: rotate(0deg) translate(-40px) rotate(0deg) scale(1, 1);
  }
  50% {
    -webkit-transform: rotate(-180deg) translate(-40px) rotate(-180deg) scale(-1, 4.33);
            transform: rotate(-180deg) translate(-40px) rotate(-180deg) scale(-1, 4.33);
  }
  100% {
    -webkit-transform: rotate(-360deg) translate(-40px) rotate(-360deg) scale(1, -10);
            transform: rotate(-360deg) translate(-40px) rotate(-360deg) scale(1, -10);
  }
}

@-webkit-keyframes green {
  0% {
    -webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
            transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
    opacity: 1
  }
  66% {
    -webkit-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1, 1.33);
            transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1, 1.33);
    opacity: .33
  }
  100% {
    -webkit-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
            transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
    opacity: 0
  }
}

@keyframes green {
  0% {
    -webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
            transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
    opacity: 1
  }
  66% {
    -webkit-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1, 1.33);
            transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1, 1.33);
    opacity: .33
  }
  100% {
    -webkit-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
            transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
    opacity: 0
  }
}

@-webkit-keyframes blue {
  0% {
    -webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
            transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
  }
  33% {
    -webkit-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1.66, 3);
            transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1.66, 3);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
            transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
  }
}

@keyframes blue {
  0% {
    -webkit-transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
            transform: rotate(0deg) translate(30px) rotate(0deg) scale(1, 1);
  }
  33% {
    -webkit-transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1.66, 3);
            transform: rotate(180deg) translate(30px) rotate(-180deg) scale(1.66, 3);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
            transform: rotate(360deg) translate(30px) rotate(-360deg) scale(1, 1);
  }
}

JavaScript

var c, $, t;
t = Math.pow(-9,4);
c = document.getElementById('canv');
$ = c.getContext('2d');
c.width = window.innerWidth;
c.height = window.innerHeight;
$.fillStyle = 'hsla(10,60%,10%,1)';

window.addEventListener('resize', function() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
}, false);

function draw() {
  $.globalCompositeOperation = 'source-over';
  $.fillStyle = 'hsla(0,0%,0%,.09)';
  $.fillRect(0, 0, c.width, c.height);
  var foo, i, j, r;
  foo = Math.sin(t) * Math.pow(.99,2) * Math.PI;
  for (i = j = 0; j < 1000; i = ++j) {
    r = 250 * Math.sin(i * foo);
    $.globalCompositeOperation = '';
    $.fillStyle = 'hsla(' + i + 99 + ',100%, 60%,.8)';
    $.beginPath();
    $.arc(Math.sin(i) * r + (c.width / 2), 
          Math.cos(i) * r + (c.height / 2), 
          1.5, 0, Math.PI / .92);
    $.fill();

}
  t += 0.000005;
  return t %= 2 * Math.PI;

};
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();
function run() {
  window.requestAnimFrame(run);
  draw();
}
run();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg