matter+Tone模拟小球重力下落触碰音乐按键发声效果代码
代码语言:html
所属分类:其他
代码描述:matter+Tone模拟小球重力下落触碰音乐按键发声效果代码
代码标签: matter Tone 模拟 小球 重力 下落 触碰 音乐 按键 发声 效果 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet"> <style> html { font-family: "Montserrat", sans-serif; } body { background-color: #14151f; } button { font-family: inherit; font-weight: 600; cursor: pointer; opacity: 0.8; } button:hover { opacity: 1; } button:active { opacity: 0.8; } .controls { display: grid; grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr; align-items: center; justify-content: center; margin-top: 1em; gap: 1em; } .controls .drop-container { display: flex; justify-content: center; } .controls .drop-container .drop { position: relative; display: inline-flex; } .controls .drop-container .drop button { flex-shrink: 0; border: none; border-radius: 10px; padding: 1em 1em 1em 1em; background: lime; width: 7em; } .controls .drop-container .drop input[type=checkbox] { display: none; } .controls .drop-container .drop input[type=checkbox]:not(:checked) + label .checked { visibility: hidden; } .controls .drop-container .drop label[for=checkbox] { position: absolute; left: calc(100%); height: 100%; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0 10px 10px 0; padding: 0 0.5em; opacity: 0.8; } .controls .drop-container .drop label[for=checkbox]:hover { opacity: 1; } .controls .drop-container .drop label[for=checkbox]:hover .box { background-color: rgba(255, 255, 255, 0.1); } .controls .drop-container .drop label[for=checkbox]:active { opacity: 0.8; } .controls .drop-container .drop label[for=checkbox] .box { position: relative; background-color: rgba(255, 255, 255, 0.1); border-radius: 0.2em; width: 0.8em; height: 0.8em; } .controls .drop-container .drop label[for=checkbox] .box:after { font-size: 0.6em; vertical-align: middle; position: absolute; left: calc(100% + 0.4em); color: #fff; content: "auto"; } .controls .drop-container .drop label[for=checkbox] .box svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } #balls, #multiplier { position: relative; font-weight: 900; font-size: 2.2em; margin-right: auto; color: rgba(255, 255, 255, 0.2); } #balls:before,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0