tonejs模拟一个键盘midi钢琴弹奏效果代码
代码语言:html
所属分类:多媒体
代码描述:tonejs模拟一个键盘midi钢琴弹奏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400"> <style> *, *:before, *:after, ul, li, a, button, input, h1, h2, h3, h4, h5, h6, p, img, image, video { margin: 0; padding: 0; box-sizing: border-box; background-color: transparent; border: none; text-decoration: none; font-family: "Roboto"; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #eee; display: flex; align-items: center; justify-content: center; flex-direction: column; } .explanation { padding-bottom: 50px; font-family: "Roboto"; font-weight: 400; color: #333D59; } .keyboard { display: flex; align-items: center; justify-content: center; } .keyboard .white-key { width: 50px; height: 200px; background-color: #FAFAFA; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12); transition: 0.1s ease-in-out; border-bottom: 15px solid #e1e1e1; } .keyboard .white-key.active { transition: 0.1s ease-in-out; background-color: #f0f0f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12); border-bottom: 2px solid #e1e1e1; } .keyboard .black-key { width: 20px; height: 100px; background-color: #555; margin-left: -10px; margin-right: -10px; position: relative; z-index: 999; align-self: flex-start; margin-top: 0px; border-bottom: 5px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; transition: 0.1s ease-in-out; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12); } .keyboard .black-key.active { transition: 0.1s ease-in-out; border-bottom: 2px solid #333; background-color: #444; } </style> </head> <body> <div class="explanation"> ASDFGHJ - white keys && WETYU - black keys </div> <div class="keyboard"> <div class="white-key c"></div> <div class="black-key c-sh"></div> <div class="white-key d"></div> <div class="black-key d-sh"></div> <div class="white-key e"></div> <div class="white-key f"></div> <div class="black-key f-sh"></div> <div class="white-key g"></div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0