透明彩色圆圈飘落特效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>

演示如下:

图片[1]-透明彩色圆圈飘落特效html美化代码 - 日出资源网-日出资源网
演示图

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

图片[2]-透明彩色圆圈飘落特效html美化代码 - 日出资源网-日出资源网
演示图
注意 1 本网站名称:日出资源网
2 本站永久域名:www.rnmcnm.com
3 如图片或链接或内容失效等问题请联系站长或评论区留言,我每天都在线以效率为主更新~
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容