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

《君妾别》（学习黑黑《问情》代码）

<style>
#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 675px; box-shadow: 3px 3px 20px #000; background: snow; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#papa video { position: absolute; width: 100%; height: 675px; top: 0px; opacity: 1; object-fit: cover; pointer-events: none; }
#pic { position: absolute; right: -10px; bottom: -40px; width: 412px; height: 440px; opacity: 1; z-index: 3; }
</style>

<div id="papa">
        <video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/13/47/V-134738-7EBBF68F.mp4" autoplay loop muted></video>
      <img id="pic" src="https://pic.imgdb.cn/item/6585a762c458853aef2b2974.png" alt="" />
</div>

<script>
(function() {

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=425100669');
        player.setBtnCss(`
                width: 300px;
                bottom: 20px;
                --btnBg: url('https://pic.imgdb.cn/item/6585a317c458853aef13aa94.png') no-repeat center/cover;
                --trackBg: linear-gradient(to right, rgba(40, 255, 255, 0.25), rgba(146, 138, 0, 0.25), rgba(100, 62, 230, 0.35));
                --progBg: #00BFFF;
                --btnSize: 60px;
        `);
        player.setLrcCss('top: 500px; color: #E6E9E6; --bg: linear-gradient(rgba(97,163,255,.25),rgba(26,240,255,.9));;');
        player.lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
};

})();
</script>

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

黑黑的最新组件真方便，赶紧跟着学个。做个古风的歌曲玩{:4_173:}

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

感谢@马黑黑 的代码。把进度条加了点底色，不是很清楚{:4_173:}

马黑黑 发表于 2023-12-23 08:14

红影 发表于 2023-12-22 23:51
感谢@马黑黑 的代码。把进度条加了点底色，不是很清楚

可以上色的，多尝试，找到自己中意的、符合帖子环境的配色就行

起个网名好难 发表于 2023-12-23 08:17

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

醉美水芙蓉 发表于 2023-12-23 08:40

红影 发表于 2023-12-23 08:52

马黑黑 发表于 2023-12-23 08:14
可以上色的，多尝试，找到自己中意的、符合帖子环境的配色就行

我只是学一下上色，昨天有点晚了，就随便先弄了个半透明的颜色。一会再去试试换一下，看看什么底色更好看{:4_173:}

红影 发表于 2023-12-23 08:52

起个网名好难 发表于 2023-12-23 08:17


谢谢难难老师鼓励{:4_187:}

红影 发表于 2023-12-23 08:52

醉美水芙蓉 发表于 2023-12-23 08:40
红影美女巧手，做得真漂亮！

多谢水芙蓉美女鼓励，早上好{:4_187:}

梦油 发表于 2023-12-23 09:08

影子朋友冬安！

红影 发表于 2023-12-23 09:32

马黑黑 发表于 2023-12-23 08:14
可以上色的，多尝试，找到自己中意的、符合帖子环境的配色就行

我学着配置了三色，仍然取了比较透明，主要试试多颜色的是否好看{:4_173:}

红影 发表于 2023-12-23 09:49

梦油 发表于 2023-12-23 09:08
影子朋友冬安！

问好梦油，感谢临帖。上午好{:4_187:}

亦是金 发表于 2023-12-23 11:55

美！欣赏学习！{:4_187:}

马黑黑 发表于 2023-12-23 12:59

红影 发表于 2023-12-23 09:32
我学着配置了三色，仍然取了比较透明，主要试试多颜色的是否好看

其实都可以

马黑黑 发表于 2023-12-23 13:04

红影 发表于 2023-12-23 08:52
我只是学一下上色，昨天有点晚了，就随便先弄了个半透明的颜色。一会再去试试换一下，看看什么底色更好看 ...

带点透明的颜色也挺好

红影 发表于 2023-12-23 14:03

亦是金 发表于 2023-12-23 11:55
美！欣赏学习！

谢谢亦是金老师鼓励{:4_187:}

红影 发表于 2023-12-23 14:04

马黑黑 发表于 2023-12-23 12:59
其实都可以

感觉这样挺好，能透出点背景的动态{:4_173:}

马黑黑 发表于 2023-12-23 14:06

红影 发表于 2023-12-23 14:04
感觉这样挺好，能透出点背景的动态

带透明的颜色是很诱人的

红影 发表于 2023-12-23 14:10

马黑黑 发表于 2023-12-23 13:04
带点透明的颜色也挺好

谢谢，这个主要看背景了，想遮掉背景，就不用透明{:4_187:}

马黑黑 发表于 2023-12-23 14:19

红影 发表于 2023-12-23 14:10
谢谢，这个主要看背景了，想遮掉背景，就不用透明

{:4_181:}
页: [1] 2 3 4 5 6 7 8
查看完整版本: 《君妾别》（学习黑黑《问情》代码）