红影 发表于 2023-12-22 00:08

《人生如梦》（学习黑黑mPlayer组件）

<style>
#papa {
        margin: 80px 0 0 calc(50% - 781px);
        display: grid;
        place-items: center;
        width: 1400px;
        height: 800px;
        background: url('https://pic.imgdb.cn/item/658445c8c458853aef06600f.jpg');
        overflow: hidden;
        position: relative;
        z-index: 1;
}
video {
        position: absolute;
        top: -97px;
        width: 1400px;
        height: 800px;
        object-fit: cover;
        opacity: .555;
        mix-blend-mode: screen;
        clip-path:polygon(0% 10%, 100% 10%, 100% 60%, 0% 60%);

}
</style>

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06f9cddd1_10s_big.mp4" autoplay loop muted></video>
</div>

<script>
(function() {

const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        const myplayer = new mPlayer();
        myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=158938');
        myplayer.setBtnCss(`
                background: url('https://pic.imgdb.cn/item/6584499ec458853aef16c54a.png') no-repeat center/cover;
                bottom: 180px; left: 626px; width: 240px; height: 240px; filter:hue-rotate(320deg) saturate(20);
        `);
        myplayer.setLrcCss('bottom:60px;color: tan; --bg: orange; font:bold 3.2em sans-serif;');
      myplayer.lrcAr = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
};

})();
</script>

红影 发表于 2023-12-22 00:13

试了一下，发现长宽还有filter:hue-rotate都能加，本来想让按钮随机变色的，结果加@keyframes rot没用@马黑黑 {:4_173:}

红影 发表于 2023-12-22 00:23

字体大小也能调，发现黑黑原来帖子里的字体颜色正好，所以就没调{:4_173:}

亦是金 发表于 2023-12-22 10:13

问好黑黑老师的高材生红影！{:4_187:}欣赏学习,准备克隆试帖！{:4_189:}

世外桃源 发表于 2023-12-22 11:22

这个好，大气的制作{:4_178:}

世外桃源 发表于 2023-12-22 11:23

歌曲也是好听{:4_208:}

世外桃源 发表于 2023-12-22 11:23

美女你太有才了，每个作品都是这么精美{:4_199:}

世外桃源 发表于 2023-12-22 11:23

向你学习{:4_187:}

辫子哥哥 发表于 2023-12-22 11:28

美女学习很努力，收获肯定不小，现在我纯欣赏了{:4_170:}

辫子哥哥 发表于 2023-12-22 11:29

吃饭前进来看看，果然美女新品多多{:4_170:}

辫子哥哥 发表于 2023-12-22 11:30

美女辛苦，制作的个个都是精品{:4_178:}

醉美水芙蓉 发表于 2023-12-22 11:44

小文 发表于 2023-12-22 12:14

恩师厉害，学得真快！为你点赞！{:4_190:}

红影 发表于 2023-12-22 15:59

亦是金 发表于 2023-12-22 10:13
问好黑黑老师的高材生红影！欣赏学习,准备克隆试帖！

好啊，大家一起玩更快乐{:4_187:}

红影 发表于 2023-12-22 16:05

世外桃源 发表于 2023-12-22 11:22
这个好，大气的制作

谢谢桃源，就是跟着套用代码而已啊{:4_173:}

红影 发表于 2023-12-22 16:05

世外桃源 发表于 2023-12-22 11:23
歌曲也是好听

歌曲是搜来的，我也第一次听{:4_173:}

红影 发表于 2023-12-22 16:06

世外桃源 发表于 2023-12-22 11:23
美女你太有才了，每个作品都是这么精美

被桃源说得不好意思了，谢谢鼓励{:4_187:}

红影 发表于 2023-12-22 16:06

世外桃源 发表于 2023-12-22 11:23
向你学习

大家一起学习黑黑代码{:4_187:}

红影 发表于 2023-12-22 16:07

辫子哥哥 发表于 2023-12-22 11:28
美女学习很努力，收获肯定不小，现在我纯欣赏了

辫子来的少了点，多来来就学会了啊{:4_187:}

红影 发表于 2023-12-22 16:09

辫子哥哥 发表于 2023-12-22 11:29
吃饭前进来看看，果然美女新品多多

也不多，另一个只是还礼呢{:4_173:}
页: [1] 2
查看完整版本: 《人生如梦》（学习黑黑mPlayer组件）