html代码屏幕动态漂浮物

在网页制作中，我们经常会看到各种趣味性的效果。其中，经典的动态漂浮物效果可以成为网页中加强视觉吸引力的一种方式。下面，我们就来学习一下如何在网页上加入动态漂浮物。

在HTML中，我们可以使用CSS控制元素的样式，从而实现元素的动态效果。其中，我们可以通过给元素设置position：absolute; 和定时器的方式来实现动态运动。

 // 创建动态漂浮物      let w = window.innerWidth;
          let h = window.innerHeight;
          let rate = parseInt(Math.random() * 5 + 1);
          let size = parseInt(Math.random() * 20 + 10);
          let left = parseInt(Math.random() * w);
          let top = parseInt(Math.random() * h);
          let ele = document.createElement('div');
          ele.style.position = 'absolute';
          ele.style.width = size + 'px';
          ele.style.height = size + 'px';
          ele.style.borderRadius = '50%';
          ele.style.backgroundColor = 'rgba(255, 255, 255,' + Math.random() + ')';
          ele.style.boxShadow = '0px 0px ' + rate * 2 + 'px rgba(255, 255, 255, ' + Math.random() + ')';
          ele.style.left = left + 'px';
          ele.style.top = top + 'px';
          document.body.appendChild(ele);
       // 动态运动      let timer = setInterval(function () {
            let tempTop = parseInt(ele.style.top);
            let tempLeft = parseInt(ele.style.left);
            let dirTop = Math.random() >
     0.5 ? -1 : 1;
            let dirLeft = Math.random() >
     0.5 ? -1 : 1;
            ele.style.top = tempTop + dirTop * rate + 'px';
            ele.style.left = tempLeft + dirLeft * rate + 'px';
            if (tempTop  -50 || tempTop >
     h + 30 || tempLeft  -50 || tempLeft >
 w + 50) {
              ele.remove();
              clearInterval(timer);
        }
      }
    , 10);
    

在以上预置代码中，我们生成了多个大小、颜色、大小随机的圆形元素，并为其设置了随机的位置、阴影效果等。为了实现其运动效果，我们在代码中设定了定时器，并在其中定义元素的运动规律，实现了漂浮物的动态效果。

总的来说，通过以上的HTML代码预设和CSS样式的定义，我们可以在网页中实现各式各样的漂浮物动态效果，从而增强页面的视觉效果，为用户营造出更加舒适、美观的用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！