首页 > 其他分享> 文章详细

使用 JS 实现七彩雨

2021-12-16 17:05:50 阅读：224 来源： 互联网

标签：七彩 random 实现 drop raindropProperties style 雨滴 JS Math

在本文中，我们将使用 JS 构建一个生成雨水的容器。这是一场色彩随机的七彩雨。您可以随意使用颜色。首先，让我们看看我们在构建什么。

预览

在线演示地址：http://haiyong.site/qicaiyu

在这里插入图片描述

现在让我们看一下代码，我们如何让它工作。

HTML

<div class="rain-container"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

.rain-container {
  position: relative;
  background: #000;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

i {
  position: absolute;
  height: 120px;
  border-radius: 0 0 999px 999px;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    transform: translateY(-120px);
  }
  100% {
    transform: translateY(calc(100vh + 120px));
  }
}

Javascript

const rainContainer = document.querySelector(".rain-container");

// 雨滴的背景颜色
const background = [
  "linear-gradient(transparent, aqua)",
  "linear-gradient(transparent, red)",
  "linear-gradient(transparent, limegreen)",
  "linear-gradient(transparent, white)",
  "linear-gradient(transparent, yellow)"
];

const amount = 100; // 雨滴的数量
let i = 0;

// 循环并创建雨滴，然后添加到rainContainer
while (i < amount) {
  //  创建和元素
  const drop = document.createElement("i");

  //   雨滴的 CSS 属性
  const raindropProperties = {
    width: Math.random() * 5 + "px",
    positionX: Math.floor(Math.random() * window.innerWidth) + "px",
    delay: Math.random() * -20 + "s",
    duration: Math.random() * 5 + "s",
    bg: background[Math.floor(Math.random() * background.length)],
    opacity: Math.random() + 0.2
  };

  //   设置雨滴样式
  drop.style.width = raindropProperties.width;
  drop.style.left = raindropProperties.positionX;
  drop.style.animationDelay = raindropProperties.delay;
  drop.style.animationDuration = raindropProperties.duration;
  drop.style.background = raindropProperties.bg;
  drop.style.opacity = raindropProperties.opacity;

  //   将雨滴添加到雨滴容器中
  rainContainer.appendChild(drop);
  i++;
}

完整源码关注公众号【海拥】回复【代码】获取

Java、Python、算法知识体系 | PPT、简历模板 | 游戏源码 | IT行业趣味资讯 | 装机必备软件

都可关注公众号【海拥】回复【资料】获取

标签：七彩,random,实现,drop,raindropProperties,style,雨滴,JS,Math
来源： https://blog.csdn.net/m0_50057257/article/details/121977387

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用 JS 实现七彩雨

预览

Javascript