论坛 › 祝福礼堂 › 生日祝福歌 祝友昕生日快乐（8.4）

红影 发表于 2024-8-3 14:18

生日祝福歌 祝友昕生日快乐（8.4）

<style>
#papa { margin: 80px 0 0 calc(50% - 681px); display: grid; place-items: center; width: 1200px; height: 675px; background: url('') 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: 40px; 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: 490px; top: 150px; width: 220px;cursor: pointer; filter: hue-rotate(0deg);animation: rot 8s linear infinite var(--state); }
.yz {
        position: absolute;
        width: 400px;
        height: 620px; left: 0; top: 0;
        filter: opacity(.35);
        background: url('https://pic.imgdb.cn/item/66ad9cffd9c307b7e91fec2f.jpg') no-repeat center/cover;
        -webkit-mask: linear-gradient(to right, red, transparent);
}
.yz:nth-of-type(2) {
        left: 800px;
        filter: opacity(.55) sepia(0%);
        transform: rotateY(180deg);
}
.vid { position: absolute; object-fit: cover; }
      .vid:nth-of-type(1) { width: 1200px; height: 675px; pointer-events: none; filter: drop-shadow(0 0 10px GoldEnrod); }
      .vid:nth-of-type(2) { width: 100%; height: calc(100% + 60px); mix-blend-mode: screen; opacity: .95; top: -60px; }   
   @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=497918887" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/14/5b556a0355b0d_10s_big.mp4" autoplay loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/10/72/618c84ac2374b_10s_big.mp4" autoplay loop muted></video>
        <div class="yz"></div>
        <div class="yz"></div>
        <img id="player"title="播放/暂停" src="https://pic.imgdb.cn/item/66adb4aad9c307b7e939b591.png" alt="" />
</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对所有的烦恼说 bye bye\n对所有的快乐说 hi hi\n\n亲爱的亲爱的生日快乐\n每一天都精彩\n看幸福的花儿为你盛开\n\n听美妙的音乐为你喝彩\n\n亲爱的亲爱的生日快乐\n祝你幸福永远\n幸福永远\n\n点燃了蜡烛\n\n许下你心愿\n\n未来的日子每个梦想都实现\n\n唱首祝福歌\n我们相亲又相爱\n\n祝福你健康平安\n\n对所有的烦恼说 bye bye\n对所有的快乐说 hi hi\n亲爱的亲爱的生日快乐\n每一天都精彩\n\n看幸福的花儿为你盛开\n听美妙的音乐为你喝彩\n\n亲爱的亲爱的生日快乐\n祝你幸福永远\n幸福永远\n生日快乐\n生日快乐\n生日快乐\n\n对所有的烦恼说 bye bye\n对所有的快乐说 hi hi\n亲爱的亲爱的生日快乐\n每一天都精彩\n\n看幸福的花儿为你盛开\n听美妙的音乐为你喝彩\n\n亲爱的亲爱的生日快乐\n祝你幸福永远\n幸福永远`;
        getAr(lrc);
})();
</script>

红影 发表于 2024-8-3 14:19

明天就是@友昕 生日了，祝福友昕生日快乐，幸福安康@友昕 {:5_166:}{:4_177:}

小文 发表于 2024-8-3 14:21

送上生日祝福，也跟着恩师来混点蛋糕吃哈。

红影 发表于 2024-8-3 14:22

用黑黑的最新代码在两侧加了两个捧礼物的蓝衣美女，谢谢黑黑的代码{:4_187:}

小文 发表于 2024-8-3 14:22

欣赏恩师的佳作！{:4_187:}

梦油 发表于 2024-8-3 14:31

本帖最后由 梦油 于 2024-8-3 14:35 编辑

            借影子精美贺帖祝福友昕朋友生日快乐！
                                    https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F10838291%2Fbfa9b354e8db4ee0a0d34e7ec174a1ec.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTA4MzgyOTEvYmZhOWIzNTRlOGRiNGVlMGEwZDM0ZTdlYzE3NGExZWMuZ2lm%2Fsign%2F6fb43810a223b063b9984d824a82b340.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1725258836&t=842343ecb3039b44a791e853d3264683

红影 发表于 2024-8-3 17:17

小文 发表于 2024-8-3 14:21
送上生日祝福，也跟着恩师来混点蛋糕吃哈。

和小文一起祝福友昕{:4_187:}

红影 发表于 2024-8-3 17:17

小文 发表于 2024-8-3 14:22
欣赏恩师的佳作！

谢谢小文鼓励{:4_187:}

红影 发表于 2024-8-3 17:18

梦油 发表于 2024-8-3 14:31
借影子精美贺帖祝福友昕朋友生日快乐！

和梦油一起祝福友昕{:4_187:}

萍子爱写歌 发表于 2024-8-3 19:11

好看！！！！！

红影 发表于 2024-8-3 19:48

萍子爱写歌 发表于 2024-8-3 19:11
好看！！！！！

谢谢萍子鼓励{:4_187:}

小辣椒 发表于 2024-8-3 23:18

亲爱的，这个效果还是黑黑最近分享的啊，赞的！{:4_199:}

小辣椒 发表于 2024-8-3 23:19

二边二个美女，一起祝友昕生日快乐！{:4_205:}

小辣椒 发表于 2024-8-3 23:19

@友昕 生日快乐！借美女的祝福帖，一起送上祝福，帅哥生日快乐！

小辣椒 发表于 2024-8-3 23:21

正日子是明天，小辣椒还来得及，现在去做一个{:4_177:}

红影 发表于 2024-8-4 12:09

小辣椒 发表于 2024-8-3 23:18
亲爱的，这个效果还是黑黑最近分享的啊，赞的！

是啊，弄了个美女图，按黑黑的帖子效果放在了两边{:4_173:}

红影 发表于 2024-8-4 12:10

小辣椒 发表于 2024-8-3 23:19
二边二个美女，一起祝友昕生日快乐！

手里还都捧着礼物的呢{:4_173:}

红影 发表于 2024-8-4 12:10

小辣椒 发表于 2024-8-3 23:21
正日子是明天，小辣椒还来得及，现在去做一个

看到亲爱的贺帖了，非常漂亮{:4_187:}

梦油 发表于 2024-8-4 14:16

红影 发表于 2024-8-3 17:18
和梦油一起祝福友昕

你做的贺帖真美！

红影 发表于 2024-8-4 20:38

梦油 发表于 2024-8-4 14:16
你做的贺帖真美！

谢谢梦油，友昕今天上来了，也没来收礼呢{:4_173:}

查看完整版本: 生日祝福歌 祝友昕生日快乐（8.4）