|
|

楼主 |
发表于 2022-5-26 12:58
|
显示全部楼层
全部代码:
- <style>
- .mnbox {
- width: 760px; height: 560px;
- background: linear-gradient(to right bottom, teal, pink, lightseagreen);
- box-shadow: 2px 2px 8px gray;
- margin: auto; position: relative;
- }
- .stone {
- position: absolute; width: 150px; height: 150px;
- background-color: rgba(255,255,255,.35);
- background-image: radial-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45),rgba(255,255,255,.75));
- border-radius: 35% 65% 69% 31% / 53% 53% 47% 41%;
- box-shadow: inset 10px 10px 10px rgba(0,0,0,.05),
- 15px 25px 10px rgba(0,0,0,.1),
- 15px 20px 20px rgba(0,0,0,.05),
- inset -10px -10px 15px rgba(255,255,255,.9);
- display: block;
- }
- .setcenter { left: 10px; top: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
- .tobig { width: 15px; height: 15px; position: absolute; background: tan; opacity: .75; }
- </style>
- <div class="mnbox">
- <div class="stone setcenter"><span class="stone tobig"></span></div>
- </div>
- <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/07/323ae02549faa8fd493bbf6083a379bf.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- let mnbox = document.querySelector('.mnbox'),
- control = document.querySelector('.stone'),
- aud = document.querySelector('#aud');
- let current, task;
- Array.from({length: 10}).forEach(function(ele){
- ele = document.createElement('span');
- ele.className = 'stone';
- ele.style.width = numBtween(80,100) + 'px';
- ele.style.height = numBtween(80,100) + 'px';
- ele.style.left = numBtween(150,660) + 'px';
- ele.style.top = numBtween(150,460) + 'px';
- mnbox.appendChild(ele);
- });
- control.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
- aud.addEventListener('timeupdate', function(){
- task = aud.duration;
- current = aud.currentTime;
- setProgress(task,current);
- });
- function setProgress(tt,cc) {
- if(tt <= 0 || cc <= 0) return false;
- let prog = 10 * cc / tt;
- control.children[0].style.transform = 'scale(' + prog + ')';
- }
- function numBtween(min,max){
- return (Math.floor(Math.random() * (max-min+1)) + min);
- }
- </script>
复制代码
|
|