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

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

本帖最后由 亦是金 于 2024-1-23 10:43 编辑 <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: invert(0.1);
    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="http://chuangshicdn.data.mvbox.cn/music/fc/24/01/18/24011823001781258740.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: -300px;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>

liumang 发表于 2024-1-23 16:28

亦是金老师好制作，图片配色同步歌词代码都做到7了{:5_150:}

liumang 发表于 2024-1-23 16:28

{:5_152:}{:5_152:}{:5_152:}

liumang 发表于 2024-1-23 16:30

画面靓丽，歌曲好听，歌词同步配彩色图片也是漂亮的{:5_150:}

liumang 发表于 2024-1-23 16:30

谢谢亦是金老师分享

亦是金 发表于 2024-1-30 16:06

liumang 发表于 2024-1-23 16:28


问好！{:5_116:}

亦是金 发表于 2024-1-30 16:07

liumang 发表于 2024-1-23 16:30
画面靓丽，歌曲好听，歌词同步配彩色图片也是漂亮的

谢谢欣赏点赞！{:5_116:}

亦是金 发表于 2024-1-30 16:09

liumang 发表于 2024-1-23 16:30
谢谢亦是金老师分享

谢谢欣赏点赞！{:5_116:}

bgmnet 发表于 2024-2-7 22:10

试贴。。。。。？
不是正式贴吗？
页: [1]
查看完整版本: 《因为我很好》 - 郭 玲（试帖黑黑老师图片配色同步歌词代码7）