城市之光

马黑黑 · 发表于 2024-1-11 08:04

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-1-11 08:10 编辑

马黑黑 · 发表于 2024-1-11 08:05

代码分享

<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width:1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/jpg/iguivigl.jpg') no-repeat center/cover;
box-shadow: inset 0 0 300px rgba(200,6,10,.15),3px 3px 12px rgba(0,0,0,.7);
z-index: 1;
position: relative;
display: grid;
place-items: center;
}
#papa video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(0 0, 90% 0, 90% 10%, 100% 10%, 100% 100%, 0 100%);
mix-blend-mode: screen;
}
</style>
<div id="papa">
<video src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67b140632a8.mp4" muted autoplay loop></video>
</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=1811192308');
player.setBtnCss(`
width: 300px;
bottom: 10px;
--btnBg: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') no-repeat center/cover;
--trackBg: transparent;
--progBg: rgba(250,250,250,.65);
--btnSize: 50px;
`);
player.setLrcCss('top: 15px; color: rgba(250,250,250,.4); --bg: rgba(256,256,256,0.75); font-size: 2.0em;');
player.lrcAr = [ [2,"词/曲/原唱 : 李健",2.5], [6.58,"翻唱 : Jason李浩安、李羽谦",6.8], [24.58,"在这座城市中央",4.6], [31,"在那最高的地方",4.2], [36.92,"据说是它的灵魂",4.8], [42.83,"在深夜闪闪发亮",4.4], [49.48,"没什么能够隐藏",4.7], [55.35,"甚至是你我情长",5.0], [61.36,"它也会分辨是非",5.5], [67.75,"还有邪恶和善良",4.6], [74.07,"当那乌云遮挡月光",5.6], [79.96,"城市之光更明亮",4.8], [86.11,"它阻挡着黑暗降临",5.9], [92.29,"人们不会迷路慌张",4.8], [98.65,"当人们进入梦乡",4.6], [104.83,"梦境在城市投放",4.3], [110.94,"如幻的荒诞景象",4.8], [116.85,"是现实的真实模样",5.1], [147.87,"当那乌云疯狂袭来",5.2], [153.92,"狂风吹乱了街道",4.5], [160.02,"城市之光已经微弱",5.6], [166.1,"人们开始惊慌失措",5.2], [172.41,"就在那最高地方",5.4], [178.34,"突然有耀眼火光",5.0], [184.42,"它穿透无边黑暗",5.2], [190.39,"乌云化魔鬼逃散",5.6], [196.47,"欢呼中城市之光再闪亮",11.0], [211.54,"眼前又灯火辉煌",5.1], [217.42,"繁华里人来人往",5.1], [223.5,"悲欢离合又在上演",5.0], [229.29,"这才是应有的模样",5.6], [235.51,"这才是它的模样",9.4] ];
};
</script>