jq实现页面随机生成若干个点点效果

项目中需要实现页面随机生成若干个点点效果，就百度了一哈，查到个在页面上任意位置点击生成不同颜色不同大小点点的代码，按自己的需求改了改，能实现我想要的效果，在此记录下来这个方法

源码如下:

<style>
	 *{
	   margin: 0;
	   padding: 0;
	 }
	 html {
	   position: relative;
	 }
	 div {
	   width: 100px;
	   height: 100px;
	   position: absolute;
	   border-radius: 50%;
	 }
</style>
//不需要写其他dom结构 因为直接对html标签操作
<script>
    //封装随机数
     function getRandNum(min, max) {
       return Math.floor(Math.random() * (max - min + 1) + min); //为了取到255 所以(max - min + 1)这里加了个1 结合 向下取整可以取到255
     }
     //封装随机颜色
     function getRandColor() {
       var color1 = getRandNum(0, 255);
       var color2 = getRandNum(0, 255);
       var color3 = getRandNum(0, 255);
       return "rgb(" + color1 + "," + color2 + "," + color3 + ")";
     }
     //将生成的点点放入html标签内
  function fff() {
       var even = event || window.event;
       console.log(even)
       //控制生成点点的大小
       var k = getRandNum(5, 10);
       //生成点点的位置
       var x = even.clientX;
       var y = even.clientY;
       html.innerHTML +=
         '<div style="top:' +
         (y - k / 2) +
         "px;left:" +
         (x - k / 2) +
         "px;background-color:"+getRandColor()+";width:" +
         k +
         "px;height:" +
         k +
         'px;"></div>';
     }
     var html = document.getElementsByTagName("html")[0];
     // 绑定点击事件
     document.addEventListener("click", fff, false);
</script>

效果图

我的需求是在页面随机生成多个点点 并伴随闪烁效果
根据我的需求改后的代码：

<style>
/* 点点的最外层容器 */
  .bottom ,.slide4{
      width: 100%;
      height: 300px;
      position: relative;
      border: 0.01rem solid blue;
  }
 /* 点点们的集合 */
   .dots{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }

   .dots div {
      position: absolute;
      background-color: #889dd0;
      border-radius: 50%;
  }
  /* 其中一种点点的样式 */
   .dots div.num1 {
      animation: num1-run 2s linear infinite;
      animation-direction: alternate;
  }

   .dots div.num2 {
      animation: num2-run 3s linear infinite;
      animation-direction: alternate;
  }

   .dots div.num3 {
      animation: num3-run 2.5s linear infinite;
      animation-direction: alternate;
  }
/* 第一种背景光点的动效 */
@keyframes num1-run {
  0% {
    transform: translate(0rem, 0rem);
    opacity: 0;
    box-shadow: 0 0 0 0 rgb(226, 189, 141) inset;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translate(-0.1rem, 0.15rem);
    opacity: 0;
  }
  100% {
    transform: translate(0.3rem, 0.3rem);
    opacity: 1;
    box-shadow: 0 0 0.1rem 0.1rem rgb(226, 189, 141) inset;
  }
}
/* 第二种背景光点的动效 */
@keyframes num2-run {
  0% {
    transform: translate(0rem, 0rem);
    opacity: 1;
    box-shadow: 0 0 0 0 rgb(226, 189, 141) inset;
  }
  20% {
    opacity: 0;
  }
  50% {
    transform: translate(-0.2rem, 0.15rem);
    opacity: 1;
    box-shadow: 0 0 0.1rem 0.05rem rgb(226, 189, 141) inset;
  }
  100% {
    transform: translate(-0.3rem, -0.4rem);
    opacity: 0;
  }
}
/* 第三种背景光点的动效 */
@keyframes num3-run {
  0% {
    transform: translate(0rem, 0rem);
    opacity: 0;
    box-shadow: 0 0 0 0 rgb(226, 189, 141) inset;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translate(-0.2rem, 0.15rem);
    opacity: 0;
  }
  100% {
    transform: translate(-0.3rem, 0.4rem);
    opacity: 1;
    box-shadow: 0 0 0.1rem 0.05rem rgb(226, 189, 141) inset;
  }
}
</style>


//...html结构
<div class="bottom">
   <div class="dots"></div>
</div>
<div class="swiper-slide slide4">
   <div class="dots"></div>
</div>
//...html结构


<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/rem.js"></script>
<script>
let bottom = $(".bottom .dots");
let slide4 = $(".slide4 .dots");
// 产生随即点点 参数dom - 生成点点的父盒子 参数index - 标识不同的效果
function createDots(dom, index) {
  // 产生点点的位置
  var r = getRandNum(0.1, 0.17); 
  var y = getRandNum(0, 100); 
  var x = getRandNum(0, 100);
  var html = dom.html();
  var temp = getRandNum(0, 1);
  if (index == 1 && 55 > y && y > 10) {
    return;
  } else if (temp > 0.7) {
    dom.html(
      html +
      `<div class="num1 bling1" style="top:${y}%;left:${x}%;width:${r}rem;height:${r}rem;"></div>`
    );
  } else if (temp > 0.4) {
    dom.html(
      html +
      `<div class="num2 bling2" style="top:${y}%;left:${x}%;width:${r}rem;height:${r}rem;"></div>`
    );
  } else {
    dom.html(
      html +
      `<div class="num3 bling3"  style="top:${y}%;left:${x}%;width:${r}rem;height:${r}rem;"></div>`
    );
  }
  //  else {
  //   dom.html(
  //     html +
  //       `<div style="top:${y}%;left:${x}%;width:${r}rem;height:$ {r}rem;"></div>`
  //   );
  // }
}

for (let i = 0; i < 25; i++) {
  createDots(bottom, 0);
}
for (let i = 0; i < 60; i++) {
  createDots(slide4, 1);
}

// 在限定范围产生随机数
function getRandNum(min, max) {
  return (Math.random() * (max - min) + min).toFixed(1); //保留一位小数
}
</script>

效果图

标签：opacity,getRandNum,jq,点点,html,rem,var,页面
来源： https://blog.csdn.net/qq_45560350/article/details/118766630