红影 发表于 2022-5-24 19:45

《冰河》（学习黑黑分享的代码）

<style>
.mama {
      left: -302px;
       top:120px;
      width: 1200px;
      height: 661px;
      background: url('https://pic.imgdb.cn/item/628ca18a0947543129b55157.jpg') no-repeat;
      position: relative;
      box-shadow:00 8px #333;
      border-radius:12px;
}
/* 杯子主体 */
.glass {
      left: 536px;
      bottom: 20px;
      width: 50px;
      height: 230px;
      background: #D8BFD8 linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.35));
      box-shadow: 0 0 10px gray;
      position: absolute;
        cursor: pointer;
}
/* 伪元素：杯顶和杯底 */
.glass::before, .glass::after {
      position: absolute;
      content: '';
      width: inherit;
      height: 20px;
      left: -1px;
      border: 1px solid gray;
      border-radius: 50%;
      filter: blur(1px);
}
/* 杯顶 底色与主体一致*/
.glass::before {
      top: -10px;
      background: #D8BFD8 linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.35));
}
/* 杯底 底色与水体一致 */
.glass::after {
      bottom: -10px;
      background: lightblue;
}
/* 水体 */
.water {
      position: absolute;
      width: 96%;
      left: 1px;
      height: 30px;
      border-radius: 50px / 5px;
      background: lightblue;
      bottom: 0;
}
/* 伪元素：水纹和水滴 */
.water::before, .water::after { position: absolute; content: ''; }
/* 水纹 */
.water::before {
      width: 14px;
      height: 5px;
      left: calc(50% - 7px);
      top: 8px;
      border-radius: 50%;
      border: 1px solid #ddd;
      box-shadow: inset 0 0 10px gray;
      opacity: 0;
      animation: scale 1s linear infinite;
      animation: wave .8s .6s linear infinite;
}
/* 水滴 */
.water::after {
      width:16px;
      height: 16px;
      left: calc(50% - 8px);
      top: -280px;
      border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
      background: lightblue;
      transform: rotate(-45deg);
      animation: drop .8s linear infinite;
}
/* 水纹动画 */
@keyframes wave { to { opacity: .5; transform: scale(3); } }
/* 水滴动画 */
@keyframes drop { to { top: 0px; } }
</style>

<div class="mama">
      <div class="glass">
                <div class="water"></div>
      </div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=298140.mp3" autoplay="autoplay" loop="loop"></audio>
</div><br><br><br><br><br><br>

<script>
let aud = document.querySelector('#aud');
let controler = document.querySelector('.glass');
let prgbox = document.querySelector('.water');
let task, current;

aud.addEventListener('timeupdate', function(){
      task = aud.duration;
      current = aud.currentTime;
      setProgress(task,current);
});

controler.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
      if(tt <= 0 || cc <= 0) return false;
      let prog = (100 * cc / tt) * 1.6 + 30;
      prgbox.style.height =prog + 'px';
}
</script>

红影 发表于 2022-5-24 19:47

缩小一下杯子，看起来咋那么像试管啊{:4_170:}

冬天的雨 发表于 2022-5-24 19:50

怎么像流鼻血{:4_170:}

千羽 发表于 2022-5-24 20:06

那美女剪影好漂亮啊{:4_187:}

千羽 发表于 2022-5-24 20:07

是杯子吗？试管{:4_189:}也太粗了

千羽 发表于 2022-5-24 20:17

影儿的作业完成的挺好。泪滴做的漂亮，精准的滴落在高杯子里，{:4_187:}

冬天的雨 发表于 2022-5-24 20:18

看了 马老师的那个分享，美女你也是速度的，做的非常成功{:4_178:}

加林森 发表于 2022-5-24 20:37

好像比我的细点呢？恭喜红影成功了！{:4_199:}

红影 发表于 2022-5-24 21:12

冬天的雨 发表于 2022-5-24 19:50
怎么像流鼻血

哈哈，还真有点像{:4_170:}

醉美水芙蓉 发表于 2022-5-24 21:13

红影 发表于 2022-5-24 21:13

千羽 发表于 2022-5-24 20:06
那美女剪影好漂亮啊

网上找的图图{:4_173:}

红影 发表于 2022-5-24 21:14

千羽 发表于 2022-5-24 20:07
是杯子吗？试管也太粗了

管它是什么，反正可以用来收集眼泪{:4_173:}

红影 发表于 2022-5-24 21:15

千羽 发表于 2022-5-24 20:17
影儿的作业完成的挺好。泪滴做的漂亮，精准的滴落在高杯子里，

这个滴落位置和形状都直接套用黑黑代码的{:4_173:}

红影 发表于 2022-5-24 21:16

冬天的雨 发表于 2022-5-24 20:18
看了 马老师的那个分享，美女你也是速度的，做的非常成功

套代码还是方便的啊{:4_173:}

红影 发表于 2022-5-24 21:17

加林森 发表于 2022-5-24 20:37
好像比我的细点呢？恭喜红影成功了！

嗯，弄细了点，怕那美女眼泪不够多{:4_189:}

加林森 发表于 2022-5-24 21:28

红影 发表于 2022-5-24 21:17
嗯，弄细了点，怕那美女眼泪不够多

{:4_172:}

千羽 发表于 2022-5-24 21:48

红影 发表于 2022-5-24 21:15
这个滴落位置和形状都直接套用黑黑代码的

影儿作业一如既往地好美{:4_185:}

马黑黑 发表于 2022-5-24 22:27

啥呢那个啥？花潮杯子是用来收集泪水的？{:5_115:}

好创意！赞一个。

红影 发表于 2022-5-25 11:39

千羽 发表于 2022-5-24 21:48
影儿作业一如既往地好美

谢谢羽儿鼓励，影子继续好好学习，天天向上{:4_173:}

红影 发表于 2022-5-25 11:42

马黑黑 发表于 2022-5-24 22:27
啥呢那个啥？花潮杯子是用来收集泪水的？

好创意！赞一个。

总得让杯子派点用途吧。收眼泪的思路方便啊，相关歌曲很多，我倒是想做酿酒的帖子，图片和歌曲都太难找了{:4_173:}
页: [1] 2
查看完整版本: 《冰河》（学习黑黑分享的代码）