绿叶清舟 发表于 2023-1-28 17:01

生日快乐TO东篱


<style>
.mama33 { position: relative; left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/63d4e137face21e9efe36935.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }

.wrapper {
      left: 80px;
      top: 500px;
      width: 35px;
      height: 200px;
      position: relative;
      cursor: pointer;
}
.candle {
      position: absolute;
      width: inherit;
      height: inherit;
      box-shadow: inset 0 0 1px 0 rgba(0,0,0,.35), 1px 1px 10px gray;
      background: linear-gradient(to right,#eee 1%,#fd8589,#eee 99%);
      bottom: 0;
}
.candle::before ,.candle::after { position: absolute; content: ''; }
.candle::before {
      width: 40px;
      height: 40px;
      border-radius: 0 80%;
      background: linear-gradient(to left bottom, red 30%, #FFF, red 70%);
      box-shadow: inset 2px 2px 4px yellow, inset 2px 2px 4px gold;
      top: -45px;
      left: -3px;
      transform: rotate(45deg);
      filter: blur(1px);
      animation: burn .5s ease-in-out infinite alternate;
}
.candle::after {
      width: 100%;
      height: 15px;
      background: inherit;
}
@keyframes burn { to { height: 50px; } }


</style>
<div class="mama33">
      <div class="wrapper">
                <div class="candle"></div>
</div>      
      </div>      

<audio id="myaud" src="http://music.163.com/song/media/outer/url?id=501077551.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let controler = document.querySelector('.candle');
let aud = document.querySelector('#myaud');
let task = aud.duration, current;

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

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

function setProgress(tt,cc) {
      if(tt <= 0 || cc <= 0) return false;
      let prog = 100 - 100 * cc / tt;
      controler.style.height = prog + '%';
}

</script>

梦油 发表于 2023-1-28 17:17

让我们一起祝福东篱闲人朋友生日快乐、幸福安康！

庶民来了 发表于 2023-1-28 17:38

一场祝福，把庆典打开，满满的幸福。

大猫咪 发表于 2023-1-28 17:43

哈哈   清舟好帖，浪漫温馨又可爱，老头一定喜欢！{:5_106:}

和清舟一起祝福老头生日快乐！天天开心！幸福安康！

{:4_204:}{:4_191:}{:4_176:}{:4_178:}{:4_177:}

红影 发表于 2023-1-28 18:14

这个蜡烛播放器太适合祝福生日了，清舟聪明，想起来这个播放器了{:4_187:}

红影 发表于 2023-1-28 18:16

好可爱的祝福帖子。东篱大哥生日快乐，收礼开心{:4_187:}

马黑黑 发表于 2023-1-28 18:26

这根蜡烛终于派上用场了

小九 发表于 2023-1-28 21:17

哈哈，老头生日吉祥{:4_204:}

海笑 发表于 2023-1-29 10:09

共祝东篱老师生日快乐！

东篱闲人 发表于 2023-2-3 17:17

谢谢师傅，画面好卡哇伊啊。。。。{:4_189:}

东篱闲人 发表于 2023-2-3 17:18

后宫108号，这是师傅的编号吗？{:5_115:}

东篱闲人 发表于 2023-2-3 17:18

小九 发表于 2023-1-28 21:17
哈哈，老头生日吉祥

一起吉祥。。。。

东篱闲人 发表于 2023-2-3 17:18

海笑 发表于 2023-1-29 10:09
共祝东篱老师生日快乐！

谢谢谢谢。。。。{:4_180:}

绿叶清舟 发表于 2023-2-3 20:16

东篱闲人 发表于 2023-2-3 17:18
后宫108号，这是师傅的编号吗？

是你编的啊，该问你吧

东篱闲人 发表于 2023-2-3 20:48

绿叶清舟 发表于 2023-2-3 20:16
是你编的啊，该问你吧

这个编号送给师傅了，你拥有专利。。。。{:5_117:}

绿叶清舟 发表于 2023-2-3 20:59

东篱闲人 发表于 2023-2-3 20:48
这个编号送给师傅了，你拥有专利。。。。

咱就洗洗碗得了{:4_173:}

东篱闲人 发表于 2023-2-6 10:24

绿叶清舟 发表于 2023-2-3 20:59
咱就洗洗碗得了

别客气。。。。{:5_117:}
页: [1]
查看完整版本: 生日快乐TO东篱