论坛 › 祝福礼堂 › 【答谢贴】排排坐喝酒酒

绿叶清舟 发表于 2023-2-22 16:40

【答谢贴】排排坐喝酒酒

本帖最后由 绿叶清舟 于 2023-2-23 19:50 编辑 <br /><br /><style>
.mama33 { position: relative; left: -370px; width: 1300px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/63f7516ff144a01007975f2f.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.goose { position: absolute; bottom: 280px; left: 688px; width: 200px; cursor: pointer; mix-blend-mode: darken;}
.wrapper {
      left: 243px;
      top: 446px;
      width: 15px;
      height: 150px;
      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: -10px;
      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: 30px; } }


</style>
<div class="mama33">
      <div class="wrapper">
                <div class="candle"></div><img class="goose" src="https://5b0988e595225.cdn.sohucs.com/images/20190801/a86a999b3a384a7a869c14a7c40246a2.gif" alt="" />       
</div>      
      </div>      

<audio id="myaud" src="https://music.163.com/song/media/outer/url?id=2020341303.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-2-22 17:29

沙发我的{:4_174:}

小辣椒 发表于 2023-2-22 17:30

哈哈~~~清舟太好玩了{:4_170:}

小辣椒 发表于 2023-2-22 17:31

生日蜡烛点起来了，一起唱生日快乐的歌{:4_208:}

小辣椒 发表于 2023-2-22 17:31

开心的一起喝酒{:4_191:}{:4_176:}{:4_176:}

小辣椒 发表于 2023-2-22 17:33

一起祝清舟生日快乐！永远幸福快乐伴随你！{:4_179:}

梦油 发表于 2023-2-22 17:46

清舟朋友的制作很有意思。我看清舟朋友是一位重感情的人，清舟会把他人的好记在心里，即便是很小的细节，她也不会忽略，因为，在她心中，别人有自己，就值得自己珍惜这种情感。

红影 发表于 2023-2-22 17:53

清舟做了这么多头像在帖子里啊，有趣，一个个看过来，友昕在喂猫，樵歌和东篱大哥坐在了桌子两端，还有九儿、小辣椒、梦油等人，鱼儿变成了小朋友。捧蛋糕的这位是谁？居然没认出来{:4_173:}

红影 发表于 2023-2-22 17:54

清舟生日还过过，就开始答谢了啊，太急了点吧{:4_187:}

马黑黑 发表于 2023-2-22 18:29

10楼我的

庶民 发表于 2023-2-22 18:53

太有趣了，这样的答谢太有意义了。

绿叶清舟 发表于 2023-2-22 19:43

马黑黑 发表于 2023-2-22 18:29
10楼我的

蜡烛改了一下尺寸，上面的火很难对齐了啊

绿叶清舟 发表于 2023-2-22 19:45

红影 发表于 2023-2-22 17:54
清舟生日还过过，就开始答谢了啊，太急了点吧

三天流水席，完了收拾完桌子，鱼儿差不多该进产房了{:4_189:}

绿叶清舟 发表于 2023-2-22 19:47

红影 发表于 2023-2-22 17:53
清舟做了这么多头像在帖子里啊，有趣，一个个看过来，友昕在喂猫，樵歌和东篱大哥坐在了桌子两端，还有九儿 ...

友昕头象头歪着的只能喂猫了，捧蛋糕的那个小满啊，头象那个头低的太厉害了，拉来有点变形了，这图太难找了想要人再多些的可是人都太小了，没放按头了

绿叶清舟 发表于 2023-2-22 19:51

小辣椒 发表于 2023-2-22 17:31
开心的一起喝酒

{:4_176:}{:4_176:}{:4_176:}辣椒能喝的吧，多喝几杯了

绿叶清舟 发表于 2023-2-22 19:54

小辣椒 发表于 2023-2-22 17:33
一起祝清舟生日快乐！永远幸福快乐伴随你！

谢谢辣椒，我们都要幸福哦

绿叶清舟 发表于 2023-2-22 19:55

庶民 发表于 2023-2-22 18:53
太有趣了，这样的答谢太有意义了。

谢谢庶民鼓励

绿叶清舟 发表于 2023-2-22 19:57

梦油 发表于 2023-2-22 17:46
清舟朋友的制作很有意思。我看清舟朋友是一位重感情的人，清舟会把他人的好记在心里，即便是很小的细节，她 ...

有这么好啊{:5_111:}只记好自己也轻松嘛{:5_117:}

马黑黑 发表于 2023-2-22 20:13

绿叶清舟 发表于 2023-2-22 19:43
蜡烛改了一下尺寸，上面的火很难对齐了啊

你这是风太大

樵歌 发表于 2023-2-22 20:19

居然一下子把自己给认出来了，我真厉害，鼓掌{:4_189:}

查看完整版本: 【答谢贴】排排坐喝酒酒