webgl模仿手机液态充电融合动画进度代码-html代码-BFW代码库

webgl模仿手机液态充电融合动画进度代码

代码语言：html

所属分类：动画

代码描述：webgl模仿手机液态充电融合动画进度代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>液态充电 · Liquid Charge Pro</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #05060f;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    color: #fff; -webkit-font-smoothing: antialiased;
  }
  #app {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #101426 0%, #05060f 70%);
  }

  .phone {
    position: relative; width: 280px; height: 570px; border-radius: 44px;
    background: linear-gradient(145deg, #2b2b40, #14141f);
    box-shadow: 0 0 90px rgba(80,200,255,.12), 0 40px 80px rgba(0,0,0,.7),
                inset 0 0 2px rgba(255,255,255,.12);
    padding: 12px;
  }
  .phone::before {
    content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 24px; background: #05060f; border-radius: 16px; z-index: 6;
  }
  .screen {
    position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 60%, #0a1220 0%, #030409 80%);
  }
  .orb { position: absolute; border-radius: 50%; pointer-events: none; }
  .orb1 { width: 240px; height: 240px; left: -90px; top: -80px;
          background: radial-gradient(circle, rgba(0,229,255,.5), rgba(0,229.........完整代码请登录后点击上方下载按钮下载查看