登录页随机出现小水滴，随机出现的水滴位置不重叠

最新推荐文章于 2024-09-14 22:46:39 发布

亦双城的双子娴

最新推荐文章于 2024-09-14 22:46:39 发布

阅读量173

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39285178/article/details/133889155

版权

本文介绍了一段HTML和CSS代码，展示了如何使用JavaScript动态生成随机大小的气泡，并检测这些气泡是否与页面上的其他元素重叠，实现了交互式的效果。

摘要由CSDN通过智能技术生成

公司没活，写着好玩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    height: 100%;
    background: #eff0f4;
  }
  .box {
    position: absolute;
    display: flex;
    width: 350px;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .box .content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 350px;
    height: 350px;
    box-shadow: 
    inset 20px 20px 20px rgba(0,0,0,0.05),
     25px 35px 20px rgba(0,0,0,0.05),
     25px 30px 30px rgba(0,0,0,0.05),
    inset -20px -20px 25px rgba(255,255,255,0.9);
    transition: all .5s;
    border-radius: 50%;
    /* border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%; */
  }
  .common-style {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* box-shadow: 
    inset 20px 20px 20px rgba(0,0,0,0.05),
     25px 35px 20px rgba(0,0,0,0.05),
     25px 30px 30px rgba(0,0,0,0.05),
    inset -20px -20px 25px rgba(255,255,255,0.9); */
    border-radius: 50%;
  }
  .box .content:hover {
    border-radius: 50%;
  }
  /* 内容容器的高亮气泡 */
  .box .content::before {
    content: '';
    position: absolute;
    top: 90px;
    left:110px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.7;
  }
  .box .content::after {
    content: '';
    position: absolute;
    top: 50px;
    left:85px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.7;
  }
  .common-style::before {
    content: '';
    position: absolute;
    top: 40%;
    left:40%;
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.7;
  }
  .common-style::after {
    content: '';
    position: absolute;
    top: 15%;
    left:25%;
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.7;
  }
</style>
<body>
  <div class="box">
    <div class="content">
    </div>
  </div>
  <div class="boxes">
    <!-- 随机出现小圆点 -->
  </div>
</body>
<script>
  var boxes = document.querySelector('.boxes')
  var randMath = Math.ceil(Math.random()*10) 
  console.log(randMath,'当前的随机数')
  // 获取当前坐标系的
  var screenX = window.innerWidth
  var screenY = window.innerHeight
  console.log(screenX,screenY,'当前屏幕高度')
  var positionList = [
    {
      x:screenX / 2 - 175,
      y:screenY / 2 - 175,
      r:350
    }
  ]
  // 随机出现一个小圆点
  function setRainDon() {
    var i = 1
    while(i <= randMath){
      var positionX =  Math.floor(Math.random()*screenX) 
      var positionY = Math.floor(Math.random()*screenY)
      var circleRadius = getRandom(50,300)
      if((positionX - circleRadius > 0 &&  positionX + circleRadius < screenX &&  positionY - circleRadius > 0 && positionY + circleRadius < screenY)){
        if(judgmentOverlap(positionX,positionY,circleRadius)){
          // 当新位置不存在重叠的情况下，添加该元素
          positionList.push(
            {
              x:positionX,
              y:positionY,
              r:circleRadius 
            }
          )
          var rains = document.createElement('div')
          rains.classList.add("common-style");
          console.log(positionX,positionY,circleRadius,'当前的随机位置')
          rains.style.cssText = `width:${circleRadius}px;height:${circleRadius}px;position:absolute;left:${positionX}px;top:${positionY}px;    box-shadow:inset 20px 20px 20px rgba(0,0,0,0.05),${circleRadius/10}px ${circleRadius/10}px ${circleRadius/10}px rgba(0,0,0,0.05),25px 30px 30px rgba(0,0,0,0.05),inset -20px -20px 25px rgba(255,255,255,0.9);`
          boxes.appendChild(rains)
          i++
        }
      } 
    }
  }
  // 判断当前圆是否和已存在的圆心存在重叠
  function judgmentOverlap(x,y,circle){
    // 获取目标点圆心坐标
    let xrange = x + circle / 2
    let yrange = y + circle / 2
    let flag = true
    if(this.positionList.length > 0){
      flag = this.positionList.every(item => {
        // 获取已存储位置的圆心坐标
        let coordinatesX = item.x + item.r / 2
        let coordinatesY = item.y + item.r / 2
        // 计算两个坐标之间的距离之和
        let sum = Math.sqrt(Math.pow((coordinatesX - xrange),2) + Math.pow((coordinatesY - yrange),2)) 
        console.log(sum,'当前圆心之和')
          // 如何判断两个圆形是否重叠，计算两个圆心之间的距离，如果小于两个圆半径之和，则重叠，否则不重叠
        if(sum > circle + item.r) return true
      });
    }
    return flag
  }
  // 获取水滴半径
  function getRandom(n, m)  {
    return Math.floor(Math.random() * (m - n + 1)) + n
  }
  setRainDon()
</script>
</html>