论坛 › 祝福礼堂 › 祝大猫咪生日快乐（7.13）

红影 发表于 2023-7-10 22:45

祝大猫咪生日快乐（7.13）

<style>
#mydiv {
        --clip: ''; --state: paused;
        margin: 80px 0 0 calc(50% - 681px);       
        width: 1200px;
        height: 675px;       
        box-shadow: 0px 0px 20px #000;
        pointer-events: none;
        position: relative;
        z-index: 12;
}

#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
      width: 300px;
      height: 300px;
      left: 540px;
      bottom: 160px;
      border-radius: 50%;
      pointer-events: auto;
      cursor: pointer;
      opacity: .85;
}
#mydiv::after {
      background: #F8DDFF;
      clip-path: var(--clip);
      animation: scale 6s infinite alternate linear var(--state);
}
#mydiv::before {
      background: url('https://pic.imgdb.cn/item/64aa01201ddac507cc54a460.gif') no-repeat center /cover;
      filter: hue-rotate(4deg);
}
@keyframes scale {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(360deg) scale(.8); }
      100% { transform: rotate(-360deg) scale(1); }
}
.wenzi { position: absolute; right:10px; bottom: 20px; color: #FFFFBB; font: bold 16px/20px 'FangSong',serif; opacity: .45; }

.vid { position: absolute; width: 100%; height: 100%;object-fit: cover; opacity: 1; z-index: -1}
#pic {
      position: absolute;
      left: 20px;
      top: 30px;
      width: 480px;
      height: 112px;
      opacity: 0.8;
}
#pic1 {
      position: absolute;
      right: 2.4%;
      top: 80%;
      width: 150px;
      height: 90px;
      opacity: 0.8;
}
#tit {
      position: absolute;
      right: 240px;
      top: 10px;
      background-image:url('https://pic.imgdb.cn/item/64048d06f144a01007b4f608.gif'); background-size:cover;
      width:600px; height:200px; font: bold 3.2em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}
</style>

<div id="mydiv">
<video class="vid" src="https://video-js.51miz.com/preview/video/00/00/13/51/V-135105-364A554B.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="tit">TO 大猫咪</div>
<img id="pic" src="https://pic.imgdb.cn/item/64aa1e7e1ddac507cc894a8a.gif" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/64a8acda1ddac507ccdd9df6.gif" alt="" />
<div class="wenzi">2023年7月13日 红影敬贺</div>
        <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/11/39309404bfcad9b724a2daf72ed9ef8b.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let clipBox = (xx,points,thick) => {
                let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
                for(let i = 0; i <= points; i ++) {
                        let hudu = Math.PI / 180 * 360 / points * i;
                        let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
                        pointsAr.push(x1 + 'px ' + y1 + 'px');
                }
                pointsAr.push(`${xx}px ${xx/2}px`, `${xx}px 0px`);
                return `polygon(${pointsAr.join(',')})`;
      };

      mydiv.style.setProperty('--clip',clipBox(300,6,2));

      let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);

      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影 发表于 2023-7-10 22:48

3天后就猫猫的生日了，怕自己忘了，还是先发个贺帖的好{:4_173:}
祝福猫猫生日快乐{:5_166:}{:5_166:}{:5_166:}

红影 发表于 2023-7-10 22:50

谢谢黑黑的代码{:4_204:}谢谢有声有色老师送我的标签{:4_204:}

红影 发表于 2023-7-10 22:53

黑黑的代码非常多，正想着用哪个好，找到图片后，发现挺适合黑黑的《猫的舞步》那个帖子的效果，就套用了那个代码{:4_173:}

马黑黑 发表于 2023-7-10 23:48

提前三天，猫咪还木有洗白白{:4_170:}

樵歌 发表于 2023-7-11 06:44

竟然一点都 不知道，猫咪生日就到了，祝大猫咪生日快乐{:4_176:}

樵歌 发表于 2023-7-11 06:46

那播放器里的猫咪不大像是大猫咪那猫咪呵，他那猫咪是蓝眼睛的大肥猫咪{:4_170:}

庶民 发表于 2023-7-11 07:21

祝福生日。

小文 发表于 2023-7-11 08:39

生日快乐

驻在平安夜前夕 发表于 2023-7-11 09:40

我也来贺{:5_166:}

红影 发表于 2023-7-11 09:44

马黑黑 发表于 2023-7-10 23:48
提前三天，猫咪还木有洗白白

论坛都习惯催生，对于猫猫也要催着才好{:4_173:}

红影 发表于 2023-7-11 09:45

樵歌 发表于 2023-7-11 06:44
竟然一点都 不知道，猫咪生日就到了，祝大猫咪生日快乐

师兄要经常去看生日登记哦，大家相互提醒，省得忘了坛友的生日{:4_173:}

红影 发表于 2023-7-11 09:47

樵歌 发表于 2023-7-11 06:46
那播放器里的猫咪不大像是大猫咪那猫咪呵，他那猫咪是蓝眼睛的大肥猫咪

也是哦，直接用猫猫的头像做就好了，只是想弄个动图，那头像不是动图呢{:4_173:}

梦油 发表于 2023-7-11 09:47

借红影朋友美帖为你送上浪漫的祝福，愿你幸福到永远！生日快乐！

红影 发表于 2023-7-11 09:50

庶民 发表于 2023-7-11 07:21
祝福生日。

跟庶民一起祝福猫猫。庶民也去登记个生日呗{:4_173:}

红影 发表于 2023-7-11 09:50

小文 发表于 2023-7-11 08:39
生日快乐

跟小文一起祝福猫猫{:4_187:}

红影 发表于 2023-7-11 09:51

驻在平安夜前夕 发表于 2023-7-11 09:40
我也来贺

跟夕夕一起祝福猫猫{:4_187:}

驻在平安夜前夕 发表于 2023-7-11 11:28

红影 发表于 2023-7-11 09:51
跟夕夕一起祝福猫猫

健康长寿

红影 发表于 2023-7-11 16:50

梦油 发表于 2023-7-11 09:47
借红影朋友美帖为你送上浪漫的祝福，愿你幸福到永远！生日快乐！

跟梦油一起祝福猫猫{:4_187:}

东篱闲人 发表于 2023-7-11 17:10

你给猫过生日呢，还是转猫呢？一会整迷糊了。。。。{:4_172:}

查看完整版本: 祝大猫咪生日快乐（7.13）