论坛 › 欢乐水吧 › 《天使》（天使之城主题曲） 沙拉克兰克兰深情献唱 送大家！

加林森 发表于 2021-12-28 22:56

本帖最后由 加林森 于 2022-5-24 21:26 编辑 <br /><br />马黑黑 发表于 2021-12-28 22:47

谢谢！

<style>
.mama {
      left: -242px;
      width: 1080px;
      height: 670px;
      background: url('https://pic.imgdb.cn/item/628cd6290947543129132a82.jpg') no-repeat;
      position: relative;
}
/* 杯子主体 */
.glass {
      left: 10px;
      bottom: 20px;
      width: 100px;
      height: 200px;
      background: #ccc linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.35));
      box-shadow: 0 0 10px gray;
      position: absolute;
}
/* 伪元素：杯顶和杯底 */
.glass::before, .glass::after {
      position: absolute;
      content: '';
      width: inherit;
      height: 20px;
      left: -1px;
      border: 1px solid snow;
      border-radius: 50%;
      filter: blur(1px);
}
/* 杯顶 底色与主体一致*/
.glass::before {
      top: -10px;
      background: inherit;/* #ccc linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45));*/
}
/* 杯底 底色与水体一致 */
.glass::after {
      bottom: -10px;
      background: lightseagreen;
}
/* 水体 */
.water {
      position: absolute;
      width: 100%;
      height: 30px;
      border-radius: 50px / 5px;
      background: lightseagreen;
      bottom: 0;
}
/* 伪元素：水纹和水滴 */
.water::before, .water::after { position: absolute; content: ''; }
/* 水纹 */
.water::before {
      width: 30px;
      height: 10px;
      left: calc(50% - 15px);
      top: 10px;
      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: -200px;
      border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
      background: lightseagreen;
      transform: rotate(-45deg);
      animation: drop .8s linear infinite;
}
/* 水纹动画 */
@keyframes wave { to { opacity: .5; transform: scale(2.5); } }
/* 水滴动画 */
@keyframes drop { to { top: 0px; } }
</style>

<div class="mama">
      <div class="glass">
                <div class="water"></div>
      </div>
      <audio id="aud" src="https://www.joy127.com/url/9487.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<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>

马黑黑 发表于 2021-12-29 07:38

加林森 发表于 2021-12-28 22:56
谢谢！

客气了

加林森 发表于 2021-12-29 10:36

马黑黑 发表于 2021-12-29 07:38
客气了

上午好，老黑！

马黑黑 发表于 2021-12-29 12:15

加林森 发表于 2021-12-29 10:36
上午好，老黑！

队长上午好

加林森 发表于 2021-12-29 12:22

马黑黑 发表于 2021-12-29 12:15
队长上午好

老黑中午好！

马黑黑 发表于 2021-12-29 12:23

加林森 发表于 2021-12-29 12:22
老黑中午好！

同好同好

加林森 发表于 2021-12-29 13:17

马黑黑 发表于 2021-12-29 12:23
同好同好

继续继续

红影 发表于 2021-12-29 15:58

加林森 发表于 2021-12-28 21:56
谢谢红影支持！

问好队长，再赏好帖{:4_204:}

加林森 发表于 2021-12-29 16:00

红影 发表于 2021-12-29 15:58
问好队长，再赏好帖

谢谢红影！{:4_204:}{:4_190:}

查看完整版本: 《天使》（天使之城主题曲） 沙拉克兰克兰深情献唱 送大家！