亦是金 发表于 2024-1-29 21:05

《今生有缘红线牵》 -- 安小朵/大琦（试帖黑黑老师图片配色同步歌词代码10）

本帖最后由 亦是金 于 2025-3-18 00:36 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1984482">

<style>
#mydiv {
        margin: 10px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 700px;
      border: 6px solid rgba(36, 201, 219,.95);
      border-radius: 20px;
        background: url('https://z4a.net/images/2024/01/01/240104.jpg') no-repeat 0 center/cover;
        box-shadow: 3px 3px 20px #000;
        transition: all 2.0s;
        cursor: pointer;
        position: relative;
overflow: hidden;/*溢出：隐藏；*/
        z-index: 1;
}


#mydiv:hover {
        background: url('https://z4a.net/images/2024/01/01/240107.jpg') no-repeat center/cover;
}


#mydiv::before,
#mydiv::after { position: absolute; left: 0px; top: 0px; content:url('https://www.emojiall.com/images/60/telegram/1f60d.gif');mix-blend-mode: normal; offset-path: path('M-20,-20 L1260,600'); font-size: 60px; animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }


#mydiv::after { position: absolute; left: 0px; top: 0px; content:url('https://www.emojiall.com/images/60/microsoft/1f498.png');mix-blend-mode: normal;offset-path: path('M950,-20 L124,700'); font-size: 60px; animation: move 20s var(--delay) infinite var(--state); --delay: 0s; }

#mydiv::after { --delay: -15s; }
@keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }

#btnFs {
      position: absolute;
      top:2%;
      left: 92%;
      object-fit: cover;
      z-index: 11;
      opacity: .80;

}

#vid {
      position: absolute;
      width: 115%;
      height: 110%;
      top:-80px;
left: -140px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 2;
      opacity: .80;
    mix-blend-mode: screen;/*混合模式:滤色*/
}
@keyframes rot { to { transform: rotate(360deg); } }

</style>


<div id="mydiv"></div>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca540d4b69.mp4" loop></video>
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp3/honxianqian.mp3" autoplay loop></audio>
</div>

<script>
let script = document.createElement('script');
script.src = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/pinpu_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);

(function() {
    let lrcAr = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
    window.onload = () => {
      HCPlayer({
            papa: '#mydiv',
            lrcAr: lrcAr,
            lrc_css: (`bottom: 5%; right: 40%; color: rgba(255,255,255,.9); --bg: url('https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg'); font-size: 2.4em;`),
            player_css: 'right: 15px; bottom: 50px; --track: #eee; --prog: red; --cap: silver;',
            pinpu: { num: 50, width: 3, height: 80, color: 'linear-gradient(to top, orange, red)'}



      });
    };
})();
</script>

<div style="position: relative; top: -700px; LEFT: -390px;z-index: 12435;">
<style type="text/css">
@keyframes mv { from { background-position: 0px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: absolute; width: 500px;height: 50px;top: 10px;LEFT: 0px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:28px;">《今生有缘红线牵》 </span>
<span style="color:#3d46f7;"><span style="font-size:22px;"> -- 安小朵/大琦</span></div>

<div style="position: relative;width: 500px;height: 50px;top: 650px;LEFT: 1100px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>

</td></tr></table>

红影 发表于 2024-1-29 21:57

这个制作漂亮，鼠标移开，美女图图也换了。歌词颜色漂亮。飘飞的小动图更有趣。
欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2024-1-29 22:06

问好红影！{:4_187:}

世外桃源 发表于 2024-1-30 09:52

好看好听，画面美了的{:4_199:}

亦是金 发表于 2024-1-31 14:48

世外桃源 发表于 2024-1-30 09:52
好看好听，画面美了的

谢谢欣赏点赞！{:4_180:}
页: [1]
查看完整版本: 《今生有缘红线牵》 -- 安小朵/大琦（试帖黑黑老师图片配色同步歌词代码10）