css+js实现圆圈圆环琴弦波动弹奏声音动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现圆圈圆环琴弦波动弹奏声音动画效果代码,点击任意地方波动琴弦。
代码标签: css js 圆圈 圆环 琴弦 波动 弹奏 声音 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <style> html, body { height: 100vh; background-color: black; overflow: hidden; font-family: "Noto Sans", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } canvas { height: 100vh; width: 100vw; position: relative; z-index: 9; } #logo { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; opacity: 0.08; white-space: nowrap; pointer-events: none; } #logo > img { height: 3.2vmin; } #background-image, #background-filter { height: 100%; width: 100%; position: fixed; top: 0px; left: 0px; } #background-image { z-index: 1; background-image: url("//repo.bfw.wiki/bfwrepo/image/6462b7138ecf4.png"); background-size: cover; background-position: center; opacity: 0.6; filter: blur(4px) grayscale(30%); } #background-filter { z-index: 2; background: radial-gradient(rgb(0 0 0 / 60%) 50%, transparent); } #control-bar-wrapper { width: 100%; display: flex; justify-content: center; position: fixed; top: 0px; left: 0px; z-index: 10; padding: 0.5rem; } .toggle { background-color: rgb(255 255 255 / 10%); backdrop-filter: blur(5px); padding: 0.5rem; border-radius: 0.25rem; height: 2rem; border: none; outline: none; cursor: pointer; } .toggle:is(:hover, :focus-visible) { background-color: rgb(255 255 255 / 15%); } .toggle > i { color: white; display: none; height: 1rem; width: 1rem; font-size: 0.6rem; line-height: 1rem; text-align: center; } .toggle[data-toggled="true"] > i.on { display: block; } .toggle[data-toggled="false"] > i.off { display: block; } #sound-message { position: fixed; top: 36%; left: 50%; translate: -50% -50%; z-index: 3; padding: 0.75rem; background-color: rgb(255 255 255 / 5%); border-radius: 0.4rem; transition: opacity 1000ms; pointer-events: none; } body:has(#sound-toggle[data-toggled="true"]) #sound-message { opacity: 0; } #sound-message > p { color: white; font-size: 0.9rem; white-space: nowrap; } </style> </head> <body > <div id="control-bar-wrapper"> <div id="control-bar"> <button id="sound-toggle" class="toggle" type="button" data-toggled="false" onClick="handleSoundToggle()" title="Toggle Pulse"> <i class="fa-solid fa-music-slash off"></i> <i class="fa-solid fa-music on"></i> </button> </div> </div> <div id="background-image"></div> <div id="background-filter"></div> <div id="logo"> <img src="//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png" alt="" /> </div> <div id="sound-message"> <p>Click anywhere to toggle sound</p> </div> <canvas id="paper"></canvas> <script> const paper = document.getElementById("paper"), pen = paper.getContext("2d"); const get = selector => document.querySelector(selector); const toggles = { sound: get("#sound-toggle") }; const colors = Array(21).fill("#A6C48A"); const settings = { startTime: new Date().getTime(), // This can be in the future duration: 900, // Total time for all dots to realign at the starting point maxCycles: Math.max(colors.length, 100), // Must be above colors.length or else... soundEnabled: false, // User still must interact with screen first pulseEnabled: true, // Pulse will only show if sound is enabled as well instrument: "vibraphone" // "default" | "wave" | "vibraphone" }; const getFileName = index => { if (settings.instrument === "default") return `key-${index}`; return `${settings.instrument}-key-${index}`; }; const getUrl = index => `//repo.bfw.wiki/bfwrepo/sound/tone/${getFileName(index)}.wav`; const handleSoundToggle = (enabled = !settings.soundEnabled) => { settings.soundEnabled = enabled; toggles.sound.dataset.toggled = enabled; }; document.onvisibilitychange =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0