红影 发表于 2025-1-13 14:24

《彩虹的微笑》贺朵拉芳辰（1.14）

<style>
        @import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
        #tz { --state: running; margin: 60px 0 30px calc(50% - 681px);width: 1200px; height: 674px; overflow: hidden; box-sizing: border-box;}
        #tz::before { position: absolute; content: ''; inset: 0; background: url('https://pic1.imgdb.cn/item/6784734ed0e0a243d4f3c4bf.jpg') no-repeat center/cover; animation: shake 4.2s infinite alternate var(--state); }
        @keyframes shake { to { inset: -20px; } }
        #lrc { bottom: 20px; color: hsl(318, 100%, 90%); --bg: linear-gradient(180deg, hsla(0, 100%, 40%, .75), hsla(0, 100%, 80%, .65)); font: bold 2.0em sans-serif;}
        .vid { mix-blend-mode:screen;width:100%; height:110%; bottom: -0px; webkit-mask: radial-gradient(red 30%, transparent);
        -webkit-mask: radial-gradient(red 30%, transparent); }
        #mplayer { right: 320px; top: 220px; width: 300px; height: 300px; display: grid; place-items: center; }
        #tit {
      position: absolute;
      right: 100px;
      top: 10px;
      background-image:url('https://pic.imgdb.cn/item/63f23e3af144a0100753e43c.gif'); background-size:cover;
      width:600px; height:200px; font: bold 3.2em sans-serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}
        .feather { position: absolute; width: 40px; height: 120px; background: url('https://pic1.imgdb.cn/item/678470d5d0e0a243d4f3c45e.png') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=1295192148"></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/08/47/5d273189780ee_10s_big.mp4" autoplay loop muted></video>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="tit">彩虹的微笑-贺朵拉芳辰</div>
        <div id="mplayer" class="mplayer"></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 = 8, 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(-86px);`;
                mplayer.appendChild(f);
        }
        hcplay(tz, lrcAr);
        fscreen.fs(tz, fsbtn);
</script>

红影 发表于 2025-1-13 14:27

去生日登记帖里看到朵宝明天生日，昨天晚上赶紧学了个黑黑的代码。
做得比较仓促，祝福的心却很真诚。祝福朵宝生日快乐@朵拉 {:5_166:}{:4_187:}{:4_177:}

红影 发表于 2025-1-13 14:28

感谢黑黑的代码，我把羽毛换成了小礼花@马黑黑 {:4_173:}

红影 发表于 2025-1-13 14:35

一会还有点事，等晚上来回帖。再次祝朵宝生日快乐{:4_187:}{:4_204:}

朵拉 发表于 2025-1-13 15:48

红影 发表于 2025-1-13 14:27
去生日登记帖里看到朵宝明天生日，昨天晚上赶紧学了个黑黑的代码。
做得比较仓促，祝福的心却很真诚。祝福 ...

太漂亮了，谢谢影宝 么么哒{:4_204:}{:4_185:}

梦江南 发表于 2025-1-13 17:16

好温馨的生日贺帖。

梦江南 发表于 2025-1-13 17:22

祝朵拉生日快乐！幸福满满！





花飞飞 发表于 2025-1-13 19:20

好温馨的作品啊，可爱又应景。。

花飞飞 发表于 2025-1-13 19:20

羽毛改成了小礼花，非常漂亮。。创意巧妙。。{:4_187:}

花飞飞 发表于 2025-1-13 19:21

同祝朵拉生日快乐{:4_204:}

马黑黑 发表于 2025-1-13 19:24

红影 发表于 2025-1-13 14:28
感谢黑黑的代码，我把羽毛换成了小礼花@马黑黑

你确定这是小礼花而不是冰淇淋？

马黑黑 发表于 2025-1-13 19:25

配色独到，与喜庆匹配

梦油 发表于 2025-1-13 19:26

很高兴和红影朋友一起祝福朵拉生日快乐！

花飞飞 发表于 2025-1-13 19:28

马黑黑 发表于 2025-1-13 19:24
你确定这是小礼花而不是冰淇淋？

看到锥形的就是冰淇淋呀~~这绽放的小礼花多好看{:4_173:}

马黑黑 发表于 2025-1-13 19:30

花飞飞 发表于 2025-1-13 19:28
看到锥形的就是冰淇淋呀~~这绽放的小礼花多好看

俺口渴

花飞飞 发表于 2025-1-13 19:33

马黑黑 发表于 2025-1-13 19:30
俺口渴

{:4_190:}上茶，热腾腾的

马黑黑 发表于 2025-1-13 19:34

花飞飞 发表于 2025-1-13 19:33
上茶，热腾腾的

茶不解渴，解乏

樵歌 发表于 2025-1-13 19:39

看到师妹的祝福帖子，没回就赶紧去转个轱辘，送给朵儿。

樵歌 发表于 2025-1-13 19:39

借师妹美贴祝朵儿生日快乐！

花飞飞 发表于 2025-1-13 19:46

马黑黑 发表于 2025-1-13 19:34
茶不解渴，解乏

{:4_191:}这个白的解渴。。。解乏松活松活也好
页: [1] 2 3 4 5 6 7
查看完整版本: 《彩虹的微笑》贺朵拉芳辰（1.14）