清茶煮雪 发表于 2025-3-28 10:46

【湖心】 TO小九 生日快乐

本帖最后由 菲儿 于 2025-3-28 10:54 编辑 <br /><br /><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<style>
        .pa {
        --state: running;
        position: relative;
        display: grid;
        place-items: center;
        width: 1300px;
        height: 731px;
        box-shadow: 3px 3px 6px gray;
        z-index: 1;
}

.mplayer {
        position: absolute;
        animation: rot 8s linear infinite var(--state);
        cursor: pointer;
        transition: .7s;
}

.mplayer:hover {
        filter: brightness(2);
}

.fsbtn {
        position: absolute;
        color: lightblue;
        left:100px;
        padding: 2px 6px;
        border: 2px solid lightblue;
        border-radius: 8px;
        user-select: none;
        cursor: pointer;
        transition: .5s;
        z-index: 9;
}

.lrc {
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, hsla(100, 10%, 50%, .75), hsla(100, 100%, 20%, .65));
        position: absolute;
        font: bold 2.4em sans-serif;
        color: hsl(100, 100%, 90%);
        white-space: pre;
        -webkit-background-clip: text;
        filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
        user-select: none;
        z-index: 1000;
}

.lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        filter: inherit;
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards var(--state);
        animation-play-state: var(--state);
}

.vid {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        webkit-mask: radial-gradient(transparent 20%, red);
        -webkit-mask: radial-gradient(transparent 20%, red);
        pointer-events: none;
}

@keyframes rot {
        to { transform: rotate(360deg); }
}

@keyframes cover1 {
        from { width: 0; }
        to { width: 100%; }
}

@keyframes cover2 {
        from { width: 0; }
        to { width: 100%; }
}
        #tz { --state: running; margin: 30px 0 30px calc(50% - 734px); background: url('https://www.bohann.net/data/attachment/forum/202503/22/210048lj59umtuhmslph5t.jpg') no-repeat center/cover; }
        #fsbtn { top: 20px; }
        #lrc { bottom: 20px; }
        #mplayer { Right:100px; top: 20px;width: 240px; height: 240px; display: grid; place-items: center; }
        .feather { position: absolute; width: 40px; height: 120px; background: url('https://bbs.cnzv.cc/up/upload/pic/12/20250113-8a19633ad580d1549c4bf168e6a3f765.png') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=475249169.mp3"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="mplayer" class="mplayer"></div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var lrcAr = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
];
        var total = 9, a = 360 / total;
        for(var i = 0; i < total; i++) {
                var f = document.createElement('span');
                f.className = 'feather';
                f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
                mplayer.appendChild(f);
        }
        hcplay(tz, lrcAr);
        fscreen.fs(tz, fsbtn);
</script>

清茶煮雪 发表于 2025-3-28 10:47

本帖最后由 菲儿 于 2025-3-28 11:13 编辑

@小九 遇见小九过生日，学套用一个歌曲代码，祝小九生日快乐！天天开心，幸福吉祥！{:4_204:}{:4_191:}

小九 发表于 2025-3-28 11:30

谢谢菲儿的生日礼物，歌曲很好听，听了2遍，居然是第一次听到呢，谢谢菲儿，祝你也开心快乐！{:4_187:}{:4_176:}{:4_183:}

清茶煮雪 发表于 2025-3-28 11:40

小九 发表于 2025-3-28 11:30
谢谢菲儿的生日礼物，歌曲很好听，听了2遍，居然是第一次听到呢，谢谢菲儿，祝你也开心快乐！{:4_ ...

我不会调代码！看见里面的动画光效好看。礼物虽小情谊真{:4_179:}祝福九儿生日快乐，年年有今朝，岁岁平安，一生幸福吉祥！{:4_191:}{:4_171:}

红影 发表于 2025-3-28 13:40

这制作好美啊，歌曲也极好听，画面协调，色彩和谐。
菲儿有心了，跟着一起祝福九儿生日快乐{:4_199:}

红影 发表于 2025-3-28 13:42

这图中女子就是九儿吧，美妙而知性。欣赏菲儿精彩制作{:4_199:}

梦油 发表于 2025-3-28 13:48

借菲儿的精美贺帖，祝福小九生日快乐！

小九 发表于 2025-3-28 18:21

菲儿 发表于 2025-3-28 11:40
我不会调代码！看见里面的动画光效好看。礼物虽小情谊真祝福九儿生日快乐，年年有今朝，岁岁平 ...

谢谢手巧的菲儿！ 祝愿好运围绕你{:4_187:}{:4_176:}

小九 发表于 2025-3-28 18:21

梦油 发表于 2025-3-28 13:48
借菲儿的精美贺帖，祝福小九生日快乐！

谢谢梦油！一起开心{:4_187:}{:4_176:}

梦油 发表于 2025-3-29 09:43

小九 发表于 2025-3-28 18:21
谢谢梦油！一起开心

你的快乐，就是我的快乐。

花飞飞 发表于 2025-3-29 10:03

欣赏菲儿漂亮的作品，色彩和特效都非常漂亮，祝福小九生日快乐。。{:4_187:}

小九 发表于 2025-3-29 14:49

花飞飞 发表于 2025-3-29 10:03
欣赏菲儿漂亮的作品，色彩和特效都非常漂亮，祝福小九生日快乐。。

谢谢飞飞的祝福，一起开心{:4_176:}{:4_179:}

清茶煮雪 发表于 2025-3-31 15:06

红影 发表于 2025-3-28 13:42
这图中女子就是九儿吧，美妙而知性。欣赏菲儿精彩制作

嗯，图中女子如九儿般美丽{:4_181:}{:4_171:}

清茶煮雪 发表于 2025-3-31 15:07

红影 发表于 2025-3-28 13:40
这制作好美啊，歌曲也极好听，画面协调，色彩和谐。
菲儿有心了，跟着一起祝福九儿生日快乐

谢谢红影，新周快乐呀！{:4_204:}我们一起祝福九儿生日快乐！{:4_204:}

清茶煮雪 发表于 2025-3-31 15:08

梦油 发表于 2025-3-28 13:48
借菲儿的精美贺帖，祝福小九生日快乐！

谢谢老师！一起祝九儿生日快乐，幸福吉祥！{:4_204:}

清茶煮雪 发表于 2025-3-31 15:09

花飞飞 发表于 2025-3-29 10:03
欣赏菲儿漂亮的作品，色彩和特效都非常漂亮，祝福小九生日快乐。。

谢谢飞飞{:4_204:}！嗯，一起祝九儿生日快乐，幸福吉祥！{:4_204:}

梦油 发表于 2025-3-31 17:22

菲儿 发表于 2025-3-31 15:08
谢谢老师！一起祝九儿生日快乐，幸福吉祥！

菲儿朋友制作的贺帖太美了。

红影 发表于 2025-3-31 20:56

菲儿 发表于 2025-3-31 15:06
嗯，图中女子如九儿般美丽

嗯嗯，那是肯定的{:4_173:}

红影 发表于 2025-3-31 20:56

菲儿 发表于 2025-3-31 15:07
谢谢红影，新周快乐呀！我们一起祝福九儿生日快乐！

谢谢菲儿的美好制作，我们一起祝福九儿{:4_187:}

小九 发表于 2025-3-31 21:17

菲儿 发表于 2025-3-31 15:09
谢谢飞飞！嗯，一起祝九儿生日快乐，幸福吉祥！

谢谢菲儿的美贴，祝福诸事顺利，开心快乐{:4_176:}{:4_176:}
页: [1] 2
查看完整版本: 【湖心】 TO小九 生日快乐