|
|

楼主 |
发表于 2022-6-3 15:36
|
显示全部楼层
- <style>
- .outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: #ccc linear-gradient(rgba(100,26,210,.75),rgba(25,175,100,.65)); }
- .mama { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; cursor: pointer; }
- .wrap { width: 96px; height: 80px; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15)); display: flex; align-items: flex-end; gap: 4px; }
- .wrap span { width: 6px; height: 60px; background-color: rgba(255,0,0,.6); display: block; position: relative; }
- .wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
- .mama meter { width: 96px; position: absolute; bottom: -4px;}
- @keyframes up { from { top: -3px; } to { top: -16px; } }
- </style>
- <div class="outer">
- <div class="mama">
- <div class="wrap"></div>
- <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
- </div>
- </div>
- <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/02/abf40da9a702bb249811e7d47ac25f91.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
- let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;
- Array.from({length: 10}).forEach((ele) => {
- ele = document.createElement('span');
- ele.className = 'sskey';
- ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
- wrap.appendChild(ele);
- })
- let sskey = document.querySelectorAll('.sskey');
- mama.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('timeupdate', () => {
- Array.from(sskey).forEach((ele) => {
- ele.style.height = num(10, 60) + 'px';
- })
- meter.value = prog(aud.duration, aud.currentTime);
- })
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|