杯子装不下海（预览）

马黑黑

马黑黑

谁有兴趣完善一下：

1. <style>
   
2. .wrap {
   
3.         margin: 50px auto 0;
   
4.         width: 100px;
   
5.         height: 160px;
   
6.         background: #ccc linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.25));
   
7.         box-shadow: 2px 2px  50px rgba(0,0,0,.6);
   
8.         position: relative;
   
9. }
   
10. .wrap::before, .wrap::after {
    
11.         position: absolute;
    
12.         content: '';
    
13.         width: 100%;
    
14.         height: 40px;
    
15.         left: -1px;
    
16.         border: 1px solid #eee;
    
17.         border-radius: 50%;
    
18.         filter: blur(2px);
    
19. }
    
20. .wrap::before {
    
21.         top: -20px;
    
22.         background: #ddd;
    
23. }
    
24. .wrap::after {
    
25.         bottom: -20px;
    
26.         background: lightblue;
    
27. }
    
28. .water {
    
29.         width: inherit;
    
30.         height: 40px;
    
31.         border-radius: 50% / 20%;
    
32.         background: lightblue;
    
33.         bottom: 0;
    
34.         position: absolute;
    
35. }
    
36. .water::before, .water::after { position: absolute; content: ''; }
    
37. 
    
38. .water::before {
    
39.         width: 30px;
    
40.         height: 8px;
    
41.         left: calc(50% - 15px);
    
42.         top: 10px;
    
43.         border-radius: 50%;
    
44.         border:1px solid rgba(255,255,255,.55);
    
45.         opacity: 0;
    
46.         box-shadow: -2px -2px 10px 0 #eee;
    
47.         animation: rot 1s .5s linear infinite;
    
48. }
    
49. 
    
50. .drop {
    
51.         position: absolute;
    
52.         width:15px;
    
53.         height: 15px;
    
54.         left: calc(50% - 8px);
    
55.         top: -50px;
    
56.         border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    
57.         background: lightblue;
    
58.         transform: rotate(-45deg);
    
59.         animation: drop 1s linear infinite;
    
60. }
    
61. @keyframes rot { to { opacity: .5; transform: scale(2.5); } }
    
62. @keyframes drop { to { top: 140px; } }
    
63. </style>
    
64. 
    
65. <div class="wrap">
    
66.         <div class="drop"></div>
    
67.         <div class="water"></div>
    
68. </div>
    
69. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894212543.mp3" autoplay="autoplay" loop="loop"></audio>
    
70. 
    
71. <script>
    
72. let aud = document.querySelector('#aud');
    
73. let controler = document.querySelector('.wrap');
    
74. let prgbox = document.querySelector('.water');
    
75. let task, current;
    
76. 
    
77. aud.addEventListener('timeupdate', function(){
    
78.         task = aud.duration;
    
79.         current = aud.currentTime;
    
80.         setProgress(task,current);
    
81. });
    
82. 
    
83. controler.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
    
84. 
    
85. function setProgress(tt,cc) {
    
86.         if(tt <= 0 || cc <= 0) return false;
    
87.         let prog = 100 * cc / tt + 40;
    
88.         prgbox.style.height =  prog + 'px';
    
89. }
    
90. </script>

复制代码

加林森

老黑的这个制作有点神秘感呢。挺漂亮的。

绿叶清舟

这个漂亮

红影

原来是海的高度在逐渐上升。漂亮

红影

海水和底板貌似有个间隙？

红影

马黑黑 发表于 2022-5-24 07:48
谁有兴趣完善一下：

我们自己去做是做不出来的，怎么可能去完善

东篱闲人

这是啤的！

梦油

几年前，我曾想做一个打油的动态小图标，苦于没有找到合适的资料而告吹。黑黑朋友这个《杯子装不下海》就是很好的素材。

加林森

老黑，我根据你这个代码去制作了一个出来，你帮着看看。《落水水》的帖。谢谢！

马黑黑

加林森 发表于 2022-5-24 08:28
老黑的这个制作有点神秘感呢。挺漂亮的。

有些细节还没处理好

马黑黑

绿叶清舟 发表于 2022-5-24 09:21
这个漂亮

杯口需要修改

马黑黑

红影 发表于 2022-5-24 09:27
原来是海的高度在逐渐上升。漂亮

水体上升

马黑黑

红影 发表于 2022-5-24 09:29
海水和底板貌似有个间隙？

这是需要处理的细节之一，貌似无解

马黑黑

红影 发表于 2022-5-24 09:30
我们自己去做是做不出来的，怎么可能去完善

可以修改，修改是可以的

马黑黑

东篱闲人 发表于 2022-5-24 09:33
这是啤的！

鉴定完毕？

马黑黑

梦油 发表于 2022-5-24 10:43
几年前，我曾想做一个打油的动态小图标，苦于没有找到合适的资料而告吹。黑黑朋友这个《杯子装不下海》就是 ...

嗯，把水改成油就可以了

马黑黑

醉美水芙蓉 发表于 2022-5-24 11:29
我们不懂代码，怎么会完善呢？

说说看法也行

马黑黑

加林森 发表于 2022-5-24 11:11
老黑，我根据你这个代码去制作了一个出来，你帮着看看。《落水水》的帖。谢谢！

好的。队长真快