亦是金 发表于 2024-1-23 10:21

《因为我很好》 - 郭 玲（试帖黑黑老师图片配色同步歌词代码7）

本帖最后由 亦是金 于 2025-2-10 23:18 编辑 <br /><br /><style>
#papa {
        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://s4.ax1x.com/2022/02/20/HOqLUH.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;
}


#papa:hover {
        background: url('https://s4.ax1x.com/2022/02/19/HbLpSf.jpg') no-repeat center/cover;
}

#player {
        position: absolute;
        left: 80px;
        top: 580px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        filter:hue-rotate(20deg)contrast(150%)brightness(120%);
        opacity: .85;
        animation: rot 6s infinite linear var(--state);
}
#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: .30;
    mix-blend-mode: screen;/*混合模式:滤色*/
}
@keyframes rot { to { transform: rotate(360deg); } }

</style>

<div id="papa">
<div id="mydiv">
        <audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp3/wohenhao.mp3" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca540d4b69.mp4" loop></video>
    <img id="player" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11.png" alt="" title="播放/暂停" />
</div>


</div>

<script>
papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>


<script>

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

sFile.onload = () => {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: 'player',
                lrc_css: (`top: 620px; left: 400px; color: rgba(255,250,250,.8); --bg: url('https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg'); font-size: 2.2em;`)
        });
};

let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

</script>

<div style="position: relative; top: -700px; LEFT: -390px;z-index: 12435;">
<style type="text/css">
@keyframes mv { from { background-position: 1200px 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: -100px;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: 630px;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>

红影 发表于 2024-1-23 10:50

鼠标移动，可以在两个美女之间变化，这个制作真漂亮。欣赏亦是金老师好帖{:4_199:}

红影 发表于 2024-1-23 10:51

这个图片配色的同步歌词在两个背景中都很好看{:4_199:}

亦是金 发表于 2024-1-23 11:17

红影 发表于 2024-1-23 10:50
鼠标移动，可以在两个美女之间变化，这个制作真漂亮。欣赏亦是金老师好帖

问好红影！谢谢点赞！{:4_187:}

亦是金 发表于 2024-1-23 11:18

红影 发表于 2024-1-23 10:51
这个图片配色的同步歌词在两个背景中都很好看

祝你欣赏愉快！{:4_187:}

樵歌 发表于 2024-1-23 13:46

制作精美，一贴欣赏两位大美女。{:4_189:}

亦是金 发表于 2024-1-23 17:58

樵歌 发表于 2024-1-23 13:46
制作精美，一贴欣赏两位大美女。

问好樵歌！谢谢欣赏点赞！{:4_180:}

红影 发表于 2024-1-23 21:19

亦是金 发表于 2024-1-23 11:17
问好红影！谢谢点赞！

亦是金老师客气了，再赏好帖{:4_187:}

红影 发表于 2024-1-23 21:20

亦是金 发表于 2024-1-23 11:18
祝你欣赏愉快！

这么美的帖子，看了肯定愉快呢{:4_187:}

亦是金 发表于 2024-1-24 09:41

红影 发表于 2024-1-23 21:19
亦是金老师客气了，再赏好帖

谢谢！{:4_187:}

亦是金 发表于 2024-1-24 09:41

红影 发表于 2024-1-23 21:20
这么美的帖子，看了肯定愉快呢

早上好！{:4_187:}

红影 发表于 2024-1-24 12:51

亦是金 发表于 2024-1-24 09:41
谢谢！

问好亦是金老师，中午好{:4_187:}

红影 发表于 2024-1-24 12:51

亦是金 发表于 2024-1-24 09:41
早上好！

呵呵，上午去忙了一会，回复迟了。{:4_204:}
页: [1]
查看完整版本: 《因为我很好》 - 郭 玲（试帖黑黑老师图片配色同步歌词代码7）