大猫咪 发表于 2024-7-13 22:34

猫的生日答谢--感谢兄弟姐妹们的祝福！


<style>
#mydiv {
      --width: 1280px;
      margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
      width: var(--width);
      height: 700px;
      background: radial-gradient(circle, transparent, silver, lightgreen, cyan);
      box-shadow: 3px 3px 6px #333;
      pointer-events: none;
      overflow: hidden;
      position: relative;
}
#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
}
#mydiv::before {
      inset: 0;
      background: rgba(0, 100, 100, .15);
}
#mydiv::after {
      width: 150px;
      height: 150px;
      top: 40px;
      left: calc(49% - 49px);
      background: url('https://cccimg.com/view.php/6d4ae8985112c9c6668a2435a55e7329.png') no-repeat center/cover;
      filter: drop-shadow(0 0 26px lightblue);
      pointer-events: auto;
      cursor: pointer;
      animation: rot 8s linear infinite var(--state);
}
#vid {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: calc(100% + 70px);
      object-fit: cover;
      mix-blend-mode: color-burn;
      opacity: .75;
}


#tit {
      position: absolute;   
      top: 200px;
      background-image:url('https://cccimg.com/view.php/3c51d596b4ceacd0c513d5fb8c590d18.gif '); background-size:cover;
      width:850px; height:200px; left: 220px; font: bold 2.4em 微软雅黑; serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      solid; z-index: 10;
}
#tit2 {
      position: absolute;   
      top: 300px;
      background-image:url('https://cccimg.com/view.php/3c51d596b4ceacd0c513d5fb8c590d18.gif'); background-size:cover;
      width:850px; height:200px; left: 220px; font: bold 2.4em微软雅黑; serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}

@keyframes rot {
      to { transform: rotate(360deg); }
}
</style>

<div id="mydiv" title="播放/暂停">


<div id="tit">猫不会做图在此表示衷心的感谢</div>

<div id="tit2">感谢兄弟姐妹们的生日祝福 友谊永存 </div>


      <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/5948-audiofreehighqps/96/A7/GKwRIUEKXGj-ACAAAALr3VpS.m4a" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/00/69/611997e9c739a.mp4" muted loop autoplay disablePictureInPicture></video>
</div>

<script>
      aud.oncanplay = aud.onplaying = aud.onpause = () => {
                aud.paused ? vid.pause() : vid.play();
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                mydiv.title = ['暂停','播放'][+aud.paused];
      }
      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

大猫咪 发表于 2024-7-13 22:35

非常开心的一天，感谢兄弟姐妹们的生日祝福，猫会记住你们的厚爱，谢谢大家！

红影 发表于 2024-7-13 22:35

这个答谢帖子做得漂亮，而且答谢得这么快，猫猫厉害了{:4_199:}

大猫咪 发表于 2024-7-13 22:36

{:4_204:}{:4_191:}{:4_176:}{:4_185:}{:4_179:}{:4_177:}

红影 发表于 2024-7-13 22:36

影子第一个来收礼了，再祝猫猫生日快乐，幸福美满{:4_187:}{:4_177:}

大猫咪 发表于 2024-7-13 22:38

红影 发表于 2024-7-13 22:35
这个答谢帖子做得漂亮，而且答谢得这么快，猫猫厉害了

红影 不好意思，晚上还有应酬，我得先下了

再次谢谢大家{:4_185:}{:4_204:}{:4_179:}

小辣椒 发表于 2024-7-13 22:40

猫猫好漂亮的答谢帖，谢谢猫猫，这么迟还出去，做领导也是辛苦的{:4_172:}

红影 发表于 2024-7-13 22:41

大猫咪 发表于 2024-7-13 22:38
红影 不好意思，晚上还有应酬，我得先下了

再次谢谢大家

猫猫赶紧去玩，今天是你的好日子，必须快快乐乐的{:4_187:}

小九 发表于 2024-7-14 08:25

好漂亮的帖子，很有{:4_187:}动感！

梦油 发表于 2024-7-14 09:03

祝猫咪朋友开心快乐每一天！

辫子哥哥 发表于 2024-7-14 11:35

小猫咪今天也是要快乐哦{:4_205:}

冬天的雨 发表于 2024-7-14 19:41

猫咪客气了，一起玩最开心{:4_187:}

冬天的雨 发表于 2024-7-14 19:41

猫猫每天都要开心{:4_189:}

顾-念 发表于 2024-8-9 13:28


才看见，猫猫生日快乐！祝福永不迟……
页: [1]
查看完整版本: 猫的生日答谢--感谢兄弟姐妹们的祝福！