石心

马黑黑

马黑黑

全部代码：

1. <style>
   
2. .mnbox {
   
3.         width: 760px; height: 560px;
   
4.         background: linear-gradient(to right bottom, teal, pink, lightseagreen);
   
5.         box-shadow: 2px 2px 8px gray;
   
6.         margin: auto; position: relative;
   
7. }
   
8. .stone {
   
9.         position: absolute; width: 150px; height: 150px;
   
10.         background-color: rgba(255,255,255,.35);
    
11.         background-image: radial-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45),rgba(255,255,255,.75));
    
12.         border-radius: 35% 65% 69% 31% / 53% 53% 47% 41%;
    
13.         box-shadow: inset 10px 10px 10px rgba(0,0,0,.05),
    
14.                 15px 25px 10px rgba(0,0,0,.1),
    
15.                 15px 20px 20px rgba(0,0,0,.05),
    
16.                 inset -10px -10px 15px rgba(255,255,255,.9);
    
17.         display: block;
    
18. }
    
19. .setcenter { left: 10px; top: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
    
20. .tobig { width: 15px; height: 15px; position: absolute; background: tan; opacity: .75; }
    
21. </style>
    
22. 
    
23. <div class="mnbox">
    
24.         <div class="stone setcenter"><span class="stone tobig"></span></div>
    
25. </div>
    
26. <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/07/323ae02549faa8fd493bbf6083a379bf.mp3" autoplay="autoplay" loop="loop"></audio>
    
27. 
    
28. <script>
    
29. let mnbox = document.querySelector('.mnbox'),
    
30.         control = document.querySelector('.stone'),
    
31.         aud = document.querySelector('#aud');
    
32. let current, task;
    
33. 
    
34. Array.from({length: 10}).forEach(function(ele){
    
35.         ele = document.createElement('span');
    
36.         ele.className = 'stone';
    
37.         ele.style.width = numBtween(80,100) + 'px';
    
38.         ele.style.height = numBtween(80,100) + 'px';
    
39.         ele.style.left = numBtween(150,660) + 'px';
    
40.         ele.style.top = numBtween(150,460) + 'px';
    
41.         mnbox.appendChild(ele);
    
42. });
    
43. 
    
44. control.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
    
45. 
    
46. aud.addEventListener('timeupdate', function(){
    
47.         task = aud.duration;
    
48.         current = aud.currentTime;
    
49.         setProgress(task,current);
    
50. });
    
51. 
    
52. function setProgress(tt,cc) {
    
53.         if(tt <= 0 || cc <= 0) return false;
    
54.         let prog = 10 * cc / tt;
    
55.         control.children[0].style.transform = 'scale('  + prog + ')';
    
56. }
    
57. 
    
58. function numBtween(min,max){
    
59.         return (Math.floor(Math.random() * (max-min+1)) + min);
    
60. }
    
61. 
    
62. </script>

复制代码

东篱闲人

馒头满天飞？

马黑黑

东篱闲人 发表于 2022-5-26 13:02
馒头满天飞？

不多不多，够你吃一顿

东篱闲人

马黑黑 发表于 2022-5-26 13:13
不多不多，够你吃一顿

还是精粉的呢。。。

马黑黑

东篱闲人 发表于 2022-5-26 13:15
还是精粉的呢。。。

质量是超水准的，特供品

加林森

老黑又变了啊。。。。。

红影

晶莹剔透，而且每次刷新都有新的分布方式，这些玉石太美了

红影

这个按钮的设计最有趣，那些白色渐渐扩散，侵蚀按钮的原本色彩，很奇妙的构思

马黑黑

红影 发表于 2022-5-26 17:08
这个按钮的设计最有趣，那些白色渐渐扩散，侵蚀按钮的原本色彩，很奇妙的构思

感谢点评

马黑黑

加林森 发表于 2022-5-26 13:43
老黑又变了啊。。。。。

变变更健康

马黑黑

醉美水芙蓉 发表于 2022-5-26 17:05
很漂亮的背景！

一般一般班里倒数第三

马黑黑

红影 发表于 2022-5-26 17:06
晶莹剔透，而且每次刷新都有新的分布方式，这些玉石太美了

是很美，忍不住就又做一个

加林森

马黑黑 发表于 2022-5-26 19:06
变变更健康

好的好的。

马黑黑

加林森 发表于 2022-5-26 19:08
好的好的。

是不是啊

加林森

马黑黑 发表于 2022-5-26 19:13
是不是啊

当然是的

马黑黑

加林森 发表于 2022-5-26 19:14
当然是的

是就好，不是也好

加林森

当然好了啊

马黑黑

加林森 发表于 2022-5-26 19:18
当然好了啊

还好还好