红影 发表于 2024-7-11 23:45

《今天我请客》贺大猫咪生辰 7.13


<style>
    #papa { margin: 80px 0 0 calc(50% - 681px); display: grid; place-items: center; width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/668fcf19d9c307b7e9661c38.jpg') no-repeat center/cover, radial-gradient(black, rgba(0,191,255.5));box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
    #papa::after {content: attr(data-lrc); position: absolute; top: 30px; width: 100%; height: 60px; text-align: center; font: normal 36px/60px sans-serif; color: transparent;text-shadow: 2px 2px 2px #8B4513;background: radial-gradient(pink, Khaki, red) center/120px 60px; -webkit-background-clip: text;}
    #player { position: absolute; left: 250px; bottom: 36px; width: 140px; height: 140px; cursor: pointer; filter: hue-rotate(0deg);animation: rot 8s linear infinite var(--state); }
            .vid { position: absolute; object-fit: cover; }
      .vid:nth-of-type(1) { bottom: 0px; width: 900px; height: 550px;opacity: 0.95; border-radius: 20% 30% 0 0; pointer-events: none; filter: drop-shadow(0 0 10px GoldEnrod); }
      .vid:nth-of-type(2) { bottom: 0px;width: 100%; height: calc(100% + 60px); mix-blend-mode: screen; opacity: .95; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 71% 100%, 71% 26%, 29% 26%, 29% 100%, 0% 100%); }   
    @keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa" class="papa" data-lrc="HUACHAO">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2132506414" autoplay loop></audio>
    <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/70e951a80e56d4e28d9a1c0d7895dc91_preview.mp4" muted loop></video>
    <video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/06/36/6163a062e1cc3_10s_big.mp4" muted loop></video>
    <img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/668fed37d9c307b7e9b0bb79.png" />
</div>
<script>
(function() {
var curkey = 0, lrcAr = [], vids = document.querySelectorAll('.vid');
        var getAr = (text) => {
                var ar = text.trim().split('\n');
                ar.sort();
                var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        let result = item.match(reg);
                        let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                        lrcAr.push(.trim()]);
                });
        };
var mState = () => {
        papa.style.setProperty('--state',['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onseeked = () => curkey = 0;
        aud.ontimeupdate = () => {
                if(curkey > lrcAr.length - 1) return;
                if(aud.currentTime >= lrcAr) {
                        papa.dataset.lrc = lrcAr;
                        curkey ++;
                }
        };       
        var lrc = `
《今天我请客》\n 祝福大猫咪生日快乐\n为猫猫祝福 一起嗨起来\n今天我请客\n请你喝可乐\n愿你每天都可爱和快乐\n今天我开心\n陪你吃火锅\n吃完就算我为你赴汤蹈火\n难过的时候就吃一顿安慰\n开心的时候就吃一顿庆贺\n爱吃的人一般比较\n容易快乐\n我爱巧克力\n乖巧刻苦又努力\n我爱冰激凌\n冰雪聪明又机灵\n你若吃好就是晴天\n不要客气\n今天我请客\n请你喝可乐\n愿你每天都可爱和快乐\n今天我开心\n陪你吃火锅\n吃完就算我为你赴汤蹈火\n难过的时候就吃一顿安慰\n开心的时候就吃一顿庆贺\n爱吃的人一般比较\n容易快乐\n我爱巧克力\n乖巧刻苦又努力\n我爱冰激凌\n冰雪聪明又机灵\n你若吃好就是晴天\n不要客气\n难过的时候就吃一顿安慰\n开心的时候就吃一顿庆贺\n爱吃的人一般比较\n容易快乐\n我爱巧克力\n乖巧刻苦又努力\n我爱冰激凌\n冰雪聪明又机灵\n你若吃好就是晴天\n不要客气\n你若吃好就是晴天\n不要客气
`;
        getAr(lrc);
})();
</script>

红影 发表于 2024-7-11 23:46

@大猫咪猫猫的生日马上要到了，生日快乐{:4_177:}

红影 发表于 2024-7-11 23:47

猫猫的生日正好是周六，大家可以一起嗨起来，不醉不归{:4_191:}{:5_166:}{:4_176:}

红影 发表于 2024-7-11 23:49

看到就九儿说蛋糕糊糊大猫咪，多糊点，今天我请客，多买点蛋糕@小九 {:4_196:}

马黑黑 发表于 2024-7-12 08:19

来蹭饭{:4_170:}

大猫咪又长大了一点点

梦江南 发表于 2024-7-12 08:53

猫猫生日快乐哦！

梦江南 发表于 2024-7-12 08:53

欣赏影子好制作！{:4_187:}

梦油 发表于 2024-7-12 10:16

很高兴和影子朋友一起祝福大猫咪生日快乐！
https://pic.imgdb.cn/item/6690ecc5d9c307b7e97a2121.gif


小九 发表于 2024-7-12 11:32

好欢乐的生日贴哈哈，祝大猫咪生日可乐！{:4_187:}{:4_199:}

小九 发表于 2024-7-12 11:33

这歌也好好听，歌的名字是什么呢影子{:4_187:}

红影 发表于 2024-7-12 16:40

马黑黑 发表于 2024-7-12 08:19
来蹭饭

大猫咪又长大了一点点

蛋糕管够，美酒管够{:4_191:}{:4_176:}

红影 发表于 2024-7-12 16:40

梦江南 发表于 2024-7-12 08:53
猫猫生日快乐哦！

同祝猫猫生日{:4_187:}

红影 发表于 2024-7-12 16:41

梦江南 发表于 2024-7-12 08:53
欣赏影子好制作！

多谢梦江南鼓励{:4_187:}

红影 发表于 2024-7-12 16:41

梦油 发表于 2024-7-12 10:16
很高兴和影子朋友一起祝福大猫咪生日快乐！

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

红影 发表于 2024-7-12 16:42

小九 发表于 2024-7-12 11:33
这歌也好好听，歌的名字是什么呢影子

就是《今天我请客》啊。我标题里写了的{:4_173:}

红影 发表于 2024-7-12 16:43

小九 发表于 2024-7-12 11:32
好欢乐的生日贴哈哈，祝大猫咪生日可乐！

咱们一起欢乐，一起为猫猫庆贺{:4_187:}

朵拉 发表于 2024-7-12 20:47

俏皮可爱的制作，祝猫猫 生日快乐{:4_204:}

红影 发表于 2024-7-12 21:18

朵拉 发表于 2024-7-12 20:47
俏皮可爱的制作，祝猫猫 生日快乐

跟朵宝一起祝福猫猫{:4_187:}

小辣椒 发表于 2024-7-12 22:21

太可爱了，亲爱的做的太好了{:4_178:}

小辣椒 发表于 2024-7-12 22:22

猫猫生日，一起吃大餐{:4_205:}{:4_176:}{:4_191:}{:4_177:}
页: [1] 2 3 4
查看完整版本: 《今天我请客》贺大猫咪生辰 7.13