gsap+svg实现二进制原理动画讲解视频播放与下载代码-html代码-BFW代码库

gsap+svg实现二进制原理动画讲解视频播放与下载代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现二进制原理动画讲解视频播放与下载代码，大模型直接输出完整html

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二进制原理 — GSAP + SVG 动画演示</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#050810;display:flex;flex-direction:column;align-items:center;min-height:100vh;font-family:'Noto Sans SC',system-ui,sans-serif;color:#c8cce0;padding:24px 16px}
#wrap{width:100%;max-width:1200px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 100px rgba(0,0,0,.7)}
#S{display:block;width:100%;background:#0a0e1a}
#bar{width:100%;max-width:1200px;height:4px;background:#111828;border-radius:2px;margin-top:14px;cursor:pointer;position:relative}
#bar::before{content:'';position:absolute;top:-6px;bottom:-6px;left:0;right:0}
#bf{height:100%;border-radius:2px;background:linear-gradient(90deg,#00e5ff,#a855f7);width:0;pointer-events:none;transition:width .05s}
#ct{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap;justify-content:center}
button{background:#0f1320;color:#b0b8d0;border:1px solid #1a2040;padding:7px 16px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:13px;transition:all .15s ease;user-select:none}
button:hover{background:#1a2040;color:#e0e8f0}
button:active{transform:scale(.96)}
button.on{background:#c02040;border-color:#c02040;color:#fff;animation:pls 1s ease infinite}
@keyframes pls{0%,100%{opacity:1}50%{opacity:.65}}
#tm{font-family:'JetBrains Mono',monospace;font-size:12px;color:#3a4060;min-width:100px;text-align:center}
#nv{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.nb{padding:3px 10px;font-size:11px;opacity:.4}.nb:hover{opacity:.7}.nb.a{opacity:1;border-color:rgba(0,229,255,.5);color:#00e5ff}
#nt{margin-top:12px;font-size:11px;color:#2a3050;text-align:center;max-width:700px;line-height:1.7}
#nt code{background:#0f1320;padding:2px 5px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#4a5070}
#ld{position:fixed;top:0;left:0;right:0;height:3px;z-index:99;background:linear-gradient(90deg,#00e5ff,#a855f7);transform-origin:left;transform:scaleX(0);transition:transform .3s}
</style>
</head>
<body>

<div id="ld"></div>

<div id="wrap">
<svg id="S" viewBox="0 0 1200 675" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="gl" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur stdDeviation="6" result="b"/>
    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <filter id="gls" x="-50.........完整代码请登录后点击上方下载按钮下载查看