透明彩色圆圈飘落特效html美化代码

看过这么多樱花飘落、雪花飘落等等特效，不妨看看该特效有着独具一格的简约加高级色彩的圆圈慢慢飘落下来~

代码如下：

<!-- 彩色圆圈飘落特效 -->
<script>

function randomColor() {

  var r = Math.floor(Math.random() * 256);

  var g = Math.floor(Math.random() * 256);

  var b = Math.floor(Math.random() * 256);

  return "rgb(" + r + "," + g + "," + b + ")";

}

function createSnow() {

  var snow = document.createElement("div");

  var size = Math.floor(Math.random() * 50) + 10;

  var opacity = Math.random();

  var y = -size;

  var x = Math.floor(Math.random() * window.innerWidth);

  snow.style.position = "fixed";

  snow.style.top = y + "px";

  snow.style.left = x + "px";

  snow.style.width = size + "px";

  snow.style.height = size + "px";

  snow.style.opacity = opacity;

  snow.style.backgroundColor = randomColor();

  snow.style.borderRadius = "50%";

  snow.style.pointerEvents = "none";

  snow.style.transition = "all 1s linear";

  document.body.appendChild(snow);

  return snow;

}

function moveSnow(snow) {

  var y = parseFloat(snow.style.top);

  var x = parseFloat(snow.style.left);

  var ySpeed = Math.floor(Math.random() * 5) + 1;

  var xSpeed = (Math.random() - 0.5) * 10;

  y += ySpeed;

  x += xSpeed;

  if (y > window.innerHeight) {

    snow.remove();

  } else {

    snow.style.top = y + "px";

    snow.style.left = x + "px";

  }

}

setInterval(function() {

  var snow = createSnow();

  setTimeout(function() {

    snow.style.transform = "rotate(360deg)";

  }, 100);

  setInterval(function() {

    moveSnow(snow);

  }, 10);

}, 500);

</script>

演示如下：

使用教程：将代码放置html的</body>上方