马黑黑 发表于 2022-5-24 07:43

杯子装不下海（预览）

<style>
.wrap {
        margin: 50px auto 0;
        width: 100px;
        height: 160px;
        background: #ccc linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.25));
        box-shadow: 2px 2px50px rgba(0,0,0,.6);
        position: relative;
}
.wrap::before, .wrap::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 40px;
        left: -1px;
        border: 1px solid #eee;
        border-radius: 50%;
        filter: blur(2px);
}
.wrap::before {
        top: -20px;
        background: #ddd;
}
.wrap::after {
        bottom: -20px;
        background: lightblue;
}
.water {
        width: inherit;
        height: 40px;
        border-radius: 50% / 20%;
        background: lightblue;
        bottom: 0;
        position: absolute;
}
.water::before, .water::after { position: absolute; content: ''; }

.water::before {
        width: 30px;
        height: 8px;
        left: calc(50% - 15px);
        top: 10px;
        border-radius: 50%;
        border:1px solid rgba(255,255,255,.55);
        opacity: 0;
        box-shadow: -2px -2px 10px 0 #eee;
        animation: rot 1s .5s linear infinite;
}

.drop {
        position: absolute;
        width:15px;
        height: 15px;
        left: calc(50% - 8px);
        top: -50px;
        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
        background: lightblue;
        transform: rotate(-45deg);
        animation: drop 1s linear infinite;
}
@keyframes rot { to { opacity: .5; transform: scale(2.5); } }
@keyframes drop { to { top: 140px; } }
@keyframes up { to { height: 180px; } }
</style>

<div class="wrap">
        <div class="drop"></div>
        <div class="water"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894212543.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aud = document.querySelector('#aud');
let controler = document.querySelector('.wrap');
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 + 40;
        prgbox.style.height =prog + 'px';
}
</script>

马黑黑 发表于 2022-5-24 07:48

谁有兴趣完善一下：
<style>
.wrap {
      margin: 50px auto 0;
      width: 100px;
      height: 160px;
      background: #ccc linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.25));
      box-shadow: 2px 2px50px rgba(0,0,0,.6);
      position: relative;
}
.wrap::before, .wrap::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 40px;
      left: -1px;
      border: 1px solid #eee;
      border-radius: 50%;
      filter: blur(2px);
}
.wrap::before {
      top: -20px;
      background: #ddd;
}
.wrap::after {
      bottom: -20px;
      background: lightblue;
}
.water {
      width: inherit;
      height: 40px;
      border-radius: 50% / 20%;
      background: lightblue;
      bottom: 0;
      position: absolute;
}
.water::before, .water::after { position: absolute; content: ''; }

.water::before {
      width: 30px;
      height: 8px;
      left: calc(50% - 15px);
      top: 10px;
      border-radius: 50%;
      border:1px solid rgba(255,255,255,.55);
      opacity: 0;
      box-shadow: -2px -2px 10px 0 #eee;
      animation: rot 1s .5s linear infinite;
}

.drop {
      position: absolute;
      width:15px;
      height: 15px;
      left: calc(50% - 8px);
      top: -50px;
      border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
      background: lightblue;
      transform: rotate(-45deg);
      animation: drop 1s linear infinite;
}
@keyframes rot { to { opacity: .5; transform: scale(2.5); } }
@keyframes drop { to { top: 140px; } }
</style>

<div class="wrap">
      <div class="drop"></div>
      <div class="water"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894212543.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aud = document.querySelector('#aud');
let controler = document.querySelector('.wrap');
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 + 40;
      prgbox.style.height =prog + 'px';
}
</script>

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

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

绿叶清舟 发表于 2022-5-24 09:21

这个漂亮

红影 发表于 2022-5-24 09:27

原来是海的高度在逐渐上升。漂亮{:4_187:}

红影 发表于 2022-5-24 09:29

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

红影 发表于 2022-5-24 09:30

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

我们自己去做是做不出来的，怎么可能去完善{:4_189:}

东篱闲人 发表于 2022-5-24 09:33

这是啤的！{:5_112:}

梦油 发表于 2022-5-24 10:43

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

加林森 发表于 2022-5-24 11:11

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

醉美水芙蓉 发表于 2022-5-24 11:29

马黑黑 发表于 2022-5-24 12:08

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

有些细节还没处理好

马黑黑 发表于 2022-5-24 12:08

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

杯口需要修改

马黑黑 发表于 2022-5-24 12:09

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

水体上升

马黑黑 发表于 2022-5-24 12:10

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

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

马黑黑 发表于 2022-5-24 12:11

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

可以修改，修改是可以的

马黑黑 发表于 2022-5-24 12:11

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

鉴定完毕？

马黑黑 发表于 2022-5-24 12:12

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

嗯，把水改成油就可以了

马黑黑 发表于 2022-5-24 12:12

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

说说看法也行

马黑黑 发表于 2022-5-24 12:13

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

好的。队长真快
页: [1] 2 3
查看完整版本: 杯子装不下海（预览）