大海装不进杯子（新杯测试）

马黑黑

马黑黑

1. <style>
   
2. .mama {
   
3.         left: -242px;
   
4.         width: 1080px;
   
5.         height: 720px;
   
6.         background: url('/data/attachment/forum/202205/24/132344puogyus4ewmgysq1.jpg') no-repeat;
   
7.         position: relative;
   
8. }
   
9. /* 杯子主体 */
   
10. .glass {
    
11.         left: 10px;
    
12.         bottom: 20px;
    
13.         width: 100px;
    
14.         height: 200px;
    
15.         background: #ccc linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.35));
    
16.         box-shadow: 0 0 10px gray;
    
17.         position: absolute;
    
18. }
    
19. /* 伪元素：杯顶和杯底 */
    
20. .glass::before, .glass::after {
    
21.         position: absolute;
    
22.         content: '';
    
23.         width: inherit;
    
24.         height: 20px;
    
25.         left: -1px;
    
26.         border: 1px solid snow;
    
27.         border-radius: 50%;
    
28.         filter: blur(1px);
    
29. }
    
30. /* 杯顶 底色与主体一致*/
    
31. .glass::before {
    
32.         top: -10px;
    
33.         background: inherit;/* #ccc linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45));*/
    
34. }
    
35. /* 杯底 底色与水体一致 */
    
36. .glass::after {
    
37.         bottom: -10px;
    
38.         background: lightseagreen;
    
39. }
    
40. /* 水体 */
    
41. .water {
    
42.         position: absolute;
    
43.         width: 100%;
    
44.         height: 30px;
    
45.         border-radius: 50px / 5px;
    
46.         background: lightseagreen;
    
47.         bottom: 0;
    
48. }
    
49. /* 伪元素：水纹和水滴 */
    
50. .water::before, .water::after { position: absolute; content: ''; }
    
51. /* 水纹 */
    
52. .water::before {
    
53.         width: 30px;
    
54.         height: 10px;
    
55.         left: calc(50% - 15px);
    
56.         top: 10px;
    
57.         border-radius: 50%;
    
58.         border: 1px solid #ddd;
    
59.         box-shadow: inset 0 0 10px gray;
    
60.         opacity: 0;
    
61.         animation: scale 1s linear infinite;
    
62.         animation: wave .8s .6s linear infinite;
    
63. }
    
64. /* 水滴 */
    
65. .water::after {
    
66.         width:16px;
    
67.         height: 16px;
    
68.         left: calc(50% - 8px);
    
69.         top: -200px;
    
70.         border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    
71.         background: lightseagreen;
    
72.         transform: rotate(-45deg);
    
73.         animation: drop .8s linear infinite;
    
74. }
    
75. /* 水纹动画 */
    
76. @keyframes wave { to { opacity: .5; transform: scale(2.5); } }
    
77. /* 水滴动画 */
    
78. @keyframes drop { to { top: 0px; } }
    
79. </style>
    
80. 
    
81. <div class="mama">
    
82.         <div class="glass">
    
83.                 <div class="water"></div>
    
84.         </div>
    
85.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33367876.mp3" autoplay="autoplay" loop="loop"></audio>
    
86. </div>
    
87. 
    
88. <script>
    
89. let aud = document.querySelector('#aud');
    
90. let controler = document.querySelector('.glass');
    
91. let prgbox = document.querySelector('.water');
    
92. let task, current;
    
93. 
    
94. aud.addEventListener('timeupdate', function(){
    
95.         task = aud.duration;
    
96.         current = aud.currentTime;
    
97.         setProgress(task,current);
    
98. });
    
99. 
    
100. controler.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
     
101. 
     
102. function setProgress(tt,cc) {
     
103.         if(tt <= 0 || cc <= 0) return false;
     
104.         let prog = (100 * cc / tt) * 1.6 + 30;
     
105.         prgbox.style.height =  prog + 'px';
     
106. }
     
107. </script>
     

复制代码

加林森

老黑现在这个制作真的很完美了，真漂亮！

依蘩

黑马的帖子是高水平的

红影

安静地坐在这里，等着黑黑的杯子装满

马黑黑

红影 发表于 2022-5-24 16:07
安静地坐在这里，等着黑黑的杯子装满

好像永远装不满

加林森

马黑黑 发表于 2022-5-24 19:21
好像永远装不满

我发的那个就没有装满的。

马黑黑

加林森 发表于 2022-5-24 19:42
我发的那个就没有装满的。

想象一下就知道为什么不让装满。从立体的角度看，杯子装满的程度是到杯口椭圆的最下边缘，故而从平面的角度看它不满。

冬天的雨

马老师这个代码漂亮的，红影美女原来是玩的这个

加林森

马黑黑 发表于 2022-5-24 19:45
想象一下就知道为什么不让装满。从立体的角度看，杯子装满的程度是到杯口椭圆的最下边缘，故而从平面的角 ...

是的。你这个制作也是快到顶时音乐就完了。我那个差小半瓶就满了的。

马黑黑

加林森 发表于 2022-5-24 20:32
是的。你这个制作也是快到顶时音乐就完了。我那个差小半瓶就满了的。

计算不同

加林森

马黑黑 发表于 2022-5-24 20:55
计算不同

是的。我准备马上制作你这个帖了。

马黑黑

冬天的雨 发表于 2022-5-24 20:09
马老师这个代码漂亮的，红影美女原来是玩的这个

你也来玩玩

马黑黑

加林森 发表于 2022-5-24 20:59
是的。我准备马上制作你这个帖了。

挺好

加林森

马黑黑 发表于 2022-5-24 21:00
挺好

嗯嗯，谢谢你！

红影

马黑黑 发表于 2022-5-24 19:21
好像永远装不满

那就从头再装

朵拉

马老师 晚上好，背景图漂亮，可以分享么

马黑黑

朵拉 发表于 2022-5-24 22:07
马老师 晚上好，背景图漂亮，可以分享么

我的东东是全公开的

马黑黑

红影 发表于 2022-5-24 21:03
那就从头再装

反正可以反反复复