| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>节奏编辑器</title>
- </head>
- <body>
- <div id="menu-right">
- <div class="menu-item">增加</div>
- <div class="menu-item">删除</div>
- <div class="menu-item">导入</div>
- <div class="menu-item">导出</div>
- </div>
- <canvas></canvas>
- <progress id="music-progress-bar" value="22" max="100"></progress>
- </body>
- <style type="text/css">
- #menu-right {
- position: absolute;
- width: 200px;
- border: 1px solid white;
- box-shadow: 3px 3px 3px white;
- background-color: rgba(112, 128, 144, 0.6);
- display: none;
- z-index: 1;
- }
- .menu-item {
- height: 30px;
- line-height: 30px;
- font-size: 16px;
- text-indent: 10px;
- color: white;
- cursor: pointer;
- display: flex;
- }
- .menu-item:hover {
- background-color: rgba(0, 0, 0, 0.6);
- }
- canvas {
- position: fixed;
- top: 0px;
- left: 0px;
- }
- #music-progress-bar {
- position: fixed;
- bottom: 0px;
- left: 50%;
- transform: translateX(-50%);
- width: 500px;
- height: 50px;
- }
- </style>
- <script src="main.js"></script>
- </html>
|
