js实现聚光灯下泡泡漂浮三维视觉差异效果代码-html代码-BFW代码库

js实现聚光灯下泡泡漂浮三维视觉差异效果代码

代码语言：html

代码描述：js实现聚光灯下泡泡漂浮三维视觉差异效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          overflow: hidden;
          --d: 5000px;
          --t: 100s;
          background: #202124;
        }
        
        .world {
          width: 50vmin;
          height: 50vmin;
          perspective: calc(var(--d) * .25);
          transform: translate(-50%, -50%);
        }
        .world,
        .world .inner {
          position: absolute;
          top: 50%;
          left: 50%;
          transform-style: preserve-3d;
        }
        
        .inner {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: hsla(calc(var(--i) * 4 * 360), 60%, 90%, 0.05);
          -webkit-animation: var(--t) fly infinite linear;
                  animation: var(--t) fly infinite linear;
          -webkit-animation-delay: calc(var(--t) * -1 * var(--i));
                  animation-delay: calc(var(--t) * -1 * var(--i));
        }
        
        .particle {
          position: absolute;
          top: calc(-50% + var(--y) * 200%);
          left: calc(-50% + var(--x) * 200%);
          transform: translate3d(-50%, -50%, calc(var(--z) * var(--zp) * var(--d)));
          background: hsl(calc(var(--i) * 4 * 360), 60%, 90%);
          height: calc(var(--r) * 4vmin);
          width: calc(var(--r) * 4vmin);
          border-radius: 50%;
        }
        
        @-webkit-keyframes fly {
          0% {
            opacity: 0;
            transform: translate3d(-50%, -50%, var(--d));
          }
          50% {
            opacity: 0;
          }
          70% {
            opacity: 1;
            transform: translate3d(-50%, 0%, 0px);
          }
          90% {
            opacity: 1;
        .........完整代码请登录后点击上方下载按钮下载查看