南无月 发表于 2024-7-8 22:31

【黑师代码】棠梨煎雪(学习黑师20240708《宁月》背景变色效果)

<style>
        #papa { margin: 130px 0 0 calc(50% - 931px); width:1700px; height:900px; border: 1px solid gray; background: radial-gradient(rgba(255,192,203,.35), transparent) repeat-y center/100% 30%,url('https://642303.freep.cn/642303/tu/gufeng0708.webp') no-repeat center/cover; box-shadow: 3px 6px 12px #000; z-index: 1; position: relative; display: grid; overflow: hidden; place-items: center; }
        #papa::before, #papa::after { position: absolute; }
        #papa::before { position: absolute; content: ''; inset: 0; background: radial-gradient(circle, transparent, transparent,SkyBlue) no-repeat center/100% 100%; opacity: .8; transition: 5s; z-index: 5;}
    #papa:hover::before { inset: 100px; border-radius: 50%;filter: hue-rotate(320deg)}
    #papa::after { position: absolute; content: ''; left: calc(55% - 180px); bottom:160px; width: 200px; height: 58px; background: url('https://642303.freep.cn/642303/za/xiaochuan.png') no-repeat center/cover; opacity: .9; animation: move 10s alternate infinite forwards var(--state); --xx: 80%; z-index: 3;}
       
        #mypic1 { position: absolute; width: 360px;left: calc(90% - 30px); top: 20px;animation: fly 40s alternate infinite forwards var(--state); --xx: 0;z-index: 10;}
        #mypic2{ position: absolute; width: 360px;left: calc(10% - 160px); top: 120px;animation: fly 30s alternate infinite forwards var(--state); transform: scale(-1,1);--xx: 90%;z-index: 10;}
        #vid { position: absolute; bottom: -120px; right:-120px;width: 72%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity: .6;}

        @keyframes move { to { left: var(--xx); } }
        @keyframes fly { to { left: var(--xx); } }
</style>

<div id="papa">

        <span id="disc"></span>
        <span id="tit"></span>
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/52/5b44f4d7298d6.mp4" muted autoplay loop></video>
        <img id="mypic1" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
        <img id="mypic2" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
</div>

<script>
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        let player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=28188427');
        player.setBtnCss(`
                width: 360px;
                bottom: 60px;
                z-index: 10;
      --btnBg: url('https://642303.freep.cn/642303/za/btn04.png') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: MediumAquamarine;
                --btnSize: 80px;

        `);
        player.setLrcCss(`bottom: 15px; color: rgba(65,105,225,.4); --bg: url('https://pic.imgdb.cn/item/65a3730c871b83018ab23f7a.gif'); opacity: .3; font-size: 1.6em;`);
        player.lrcAr = [
        [-0.2,"单曲：棠梨煎雪",2.0],
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        aud.paused ? vid.pause() : vid.play();
};

</script>

南无月 发表于 2024-7-8 22:31

@马黑黑 交一份今天的背景变色作业{:4_173:}

南无月 发表于 2024-7-8 22:32

鼠标划拉面画，可看效果{:4_173:}

红影 发表于 2024-7-8 23:13

月儿把伪元素的鼠标触动往里面移动了，也很美呢。小播和进度的颜色也很出挑。
歌词同步很美，这样的动图来做同步，十分惊艳{:4_199:}

红影 发表于 2024-7-8 23:15

两侧都加了雁儿，很灵动。还加了一条小船儿。
整个画面都很漂亮，特效的加持让画面更美了{:4_199:}

梦江南 发表于 2024-7-9 07:29

真漂亮！赞！{:4_199:}

马黑黑 发表于 2024-7-9 20:55

南无月 发表于 2024-7-8 22:31
@马黑黑 交一份今天的背景变色作业

这也太厉害了吧？俺的三级助理都不敢改这个作业啦{:4_170:}

小辣椒 发表于 2024-7-10 22:57

月月你歌词是故意这样的颜色，小辣椒一个字都没有看见，不过不能怪你，怪我眼睛不好

小辣椒 发表于 2024-7-10 22:57

画面很漂亮，欣赏月月美美的效果{:4_199:}
页: [1]
查看完整版本: 【黑师代码】棠梨煎雪(学习黑师20240708《宁月》背景变色效果)