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

代码语言：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>二进制原理 - 动画展示</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#03060d;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;color:#e0e0e0;overflow-x:hidden}
.wrap{position:relative;max-width:100vw}
#anim-box{width:1280px;height:720px;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 0 80px rgba(0,255,136,.07),0 4px 40px rgba(0,0,0,.6)}
#main-svg{width:100%;height:100%;display:block}
.ctrls{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.btn{padding:10px 22px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s;font-family:inherit;letter-spacing:.3px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}
.bp{background:#00ff88;color:#070d15}.bp:hover:not(:disabled){background:#00dd77;box-shadow:0 0 18px rgba(0,255,136,.25)}
.bs{background:#151c2c;color:#8899aa;border:1px solid #253040}.bs:hover:not(:disabled){background:#253040;color:#cdd8e4}
.be{background:transparent;color:#00ff88;border:2px solid #00ff88}.be:hover:not(:disabled){background:rgba(0,255,136,.08)}
.prog-wrap{width:1280px;margin-top:10px;display:flex;align-items:center;gap:10px}
#prog-bar{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;cursor:pointer}
#prog-fill{height:100%;width:0%;background:linear-gradient(90deg,#00ff88,#00bbff);border-radius:2px;pointer-events:none}
#time-txt{font-size:12px;color:#445;min-width:90px;text-align:right;font-variant-numeric:tabular-nums}
#status{margin-top:6px;font-size:12px;color:#3a4555;min-height:18px;text-align:center}
#status.rec{color:#ef4444;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:1300px){#anim-box{width:100vw;height:56.25vw;border-radius:0}.prog-wrap{width:100vw;padding:0 12px}}
</style>
</head>
<body>
<div class="wrap">
<div id="anim-box">
<svg id="main-svg" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bgG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#070b14"/><stop offset="50%" stop-color="#0b1020"/><stop offset="100%" stop-color="#080d18"/></linearGradient>
<linearGradient id="onG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#00ff88"/><stop offset="100%" stop-color="#00cc6a"/></linearGradient>
<linearGradient id="offG" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a2236"/><stop offset="100%" stop-color="#0f1724"/></linearGradient>
<linearGradient id="trkOn" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#00ff88"/><stop offset="100%" stop-color="#00cc6a"/></linearGradient>
<filter id="gl" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<filter id="glS" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="14" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
</defs>
<rect width="1280" height="720" fill="url(#bgG)"/>
<g id="grid"></g>
<g id="ptc"></g>
<g id="sc1" opacity="0"></g>.........完整代码请登录后点击上方下载按钮下载查看