论坛 › 祝福礼堂 › 祝福樵歌生日快乐

绿叶清舟 发表于 2023-3-15 16:52

祝福樵歌生日快乐

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

.wrapper {
      left: 580px;
      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=392605.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-3-15 16:53

欣赏美帖

绿叶清舟 发表于 2023-3-15 16:58

起个网名好难 发表于 2023-3-15 16:53
欣赏美帖

谢谢起个网名好难，一起来吃蛋糕{:5_166:}

大猫咪 发表于 2023-3-15 17:26

清舟这个制作非常棒！ {:4_173:}看吧樵哥美的 {:5_106:} 哈哈

和清舟一起祝樵刚刚生日快乐，事事顺心！

{:4_204:}{:4_191:}{:5_166:}{:4_187:}

梦油 发表于 2023-3-15 17:59

清舟朋友下午好，让我们一起祝福樵歌生日快乐。

红影 发表于 2023-3-15 18:39

这个蜡烛播放器效果特别适合祝贺生日呢。清舟的贺帖漂亮，有酒，还有美人吹笛祝贺，太豪华了。师兄收礼开心，生日快乐{:4_187:}

马黑黑 发表于 2023-3-15 19:20

樵歌过生，有镁铝吹笛庆贺，喜事也

庶民 发表于 2023-3-15 19:45

https://pic.imgdb.cn/item/64115869ebf10e5d53bbf6ce.gif

庶民 发表于 2023-3-15 19:45

借光祝福，不单独发帖了。

绿叶清舟 发表于 2023-3-15 20:34

庶民 发表于 2023-3-15 19:45


谢谢庶民，一起祝福樵歌生日快乐

绿叶清舟 发表于 2023-3-15 20:34

马黑黑 发表于 2023-3-15 19:20
樵歌过生，有镁铝吹笛庆贺，喜事也

你过生来一队

绿叶清舟 发表于 2023-3-15 20:35

红影 发表于 2023-3-15 18:39
这个蜡烛播放器效果特别适合祝贺生日呢。清舟的贺帖漂亮，有酒，还有美人吹笛祝贺，太豪华了。师兄收礼开心 ...

有美人可以多喝几杯了{:4_189:}

绿叶清舟 发表于 2023-3-15 20:35

梦油 发表于 2023-3-15 17:59
清舟朋友下午好，让我们一起祝福樵歌生日快乐。

梦油晚上好，谢谢一起祝福{:4_176:}

绿叶清舟 发表于 2023-3-15 20:36

大猫咪 发表于 2023-3-15 17:26
清舟这个制作非常棒！   看吧樵哥美的哈哈

和清舟一起祝樵刚刚生日快乐，事事顺心 ...

千杯不醉了{:4_189:}{:4_176:}

马黑黑 发表于 2023-3-15 20:36

绿叶清舟 发表于 2023-3-15 20:34
你过生来一队

{:4_196:}

大猫咪 发表于 2023-3-15 20:37

绿叶清舟 发表于 2023-3-15 20:36
千杯不醉了

必须的   干杯 {:4_191:}{:4_191:} 清舟{:4_189:}

绿叶清舟 发表于 2023-3-15 20:44

大猫咪 发表于 2023-3-15 20:37
必须的   干杯清舟

{:4_191:}{:4_191:}樵歌这会正温柔着呢，咱先喝了

大猫咪 发表于 2023-3-15 20:45

本帖最后由 大猫咪 于 2023-3-15 20:54 编辑

绿叶清舟 发表于 2023-3-15 20:44
樵歌这会正温柔着呢，咱先喝了
就是{:4_189:}不知道温柔去那了

梦油 发表于 2023-3-15 20:49

绿叶清舟 发表于 2023-3-15 20:35
梦油晚上好，谢谢一起祝福

我们也分享一分快乐。

绿叶清舟 发表于 2023-3-15 20:52

大猫咪 发表于 2023-3-15 20:45
就是不温柔去那了

今天可以温柔一下了{:4_173:}

查看完整版本: 祝福樵歌生日快乐