One
<style>#papa {
margin: 20px 0 20px calc(50% - 681px);
width: 1200px;
height: 800px;
background: url('https://638183.freep.cn/638183/t24/jpg/one.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
z-index: 1;
transition: filter .75s;
display: grid;
place-items: center;
position: relative;
}
#papa::after {
position: absolute;
content: url('https://638183.freep.cn/638183/t23/btn/uih.webp');
right: -15px;
top: -15px;
mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
-webkit-mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
}
#papa:hover { filter: brightness(80%); }
#papa video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=413961696" autoplay="" loop=""></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" muted loop></video>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: 'top: 20px; color: rgba(250,250,250,.4); --bg: url("https://638183.freep.cn/638183/small/002.png");',
fs_css: 'bottom: 80px; left:340px; color: #eee; background: #333;',
player_css: `
bottom: 30px;
left: 260px;
border-width: 0;
color: #fff;
--size: 240px;
--bRad: 50%;
--track: gray;
--prog: lightblue;
--btnBg: url('https://638183.freep.cn/638183/t23/btn/uih.webp') no-repeat center/cover;
`,
});
};
setInterval(() => aud.paused ? vid.pause() : vid.play());
})();
</script>
代码（歌词仅保留样式）
<style>
#papa {
margin: 20px 0 20px calc(50% - 601px);
width: 1200px;
height: 800px;
background: url('https://638183.freep.cn/638183/t24/jpg/one.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
z-index: 1;
transition: filter .75s;
display: grid;
place-items: center;
position: relative;
}
#papa::after {
position: absolute;
content: url('https://638183.freep.cn/638183/t23/btn/uih.webp');
right: -15px;
top: -15px;
mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
-webkit-mask: linear-gradient(to top, transparent 10%, red 65%, red 0);
}
#papa:hover { filter: brightness(80%); }
#papa video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=413961696" autoplay="" loop=""></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4" muted loop></video>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ , ];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: 'top: 20px; color: rgba(250,250,250,.4); --bg: url("https://638183.freep.cn/638183/small/002.png");',
fs_css: 'bottom: 80px; left:340px; color: #eee; background: #333;',
player_css: `
bottom: 30px;
left: 260px;
border-width: 0;
color: #fff;
--size: 240px;
--bRad: 50%;
--track: gray;
--prog: lightblue;
--btnBg: url('https://638183.freep.cn/638183/t23/btn/uih.webp') no-repeat center/cover;
`,
});
};
setInterval(() => aud.paused ? vid.pause() : vid.play());
})();
</script>
https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 有意思，这样五颜六色的双行歌词，和脚链效果正好相配。
那朵花儿既作为按钮，也点缀了背景。{:4_199:} 黑黑的制作总是把各种效果信手拈来，这构思太灵活了{:4_199:} 这个帖子里还出现了上节课讲过的遮罩mask，只是用法和上节课不太一样呢{:4_173:} 鼠标移动还能让背景变暗，很有趣{:4_173:} 起个网名好难 发表于 2024-1-13 08:55
早上好 红影 发表于 2024-1-13 10:18
有意思，这样五颜六色的双行歌词，和脚链效果正好相配。
那朵花儿既作为按钮，也点缀了背景。
右上角的山茶花既是点缀也是遮盖，挡住了办公的熊猫{:4_170:} 红影 发表于 2024-1-13 10:36
鼠标移动还能让背景变暗，很有趣
这是小儿科 红影 发表于 2024-1-13 10:19
黑黑的制作总是把各种效果信手拈来，这构思太灵活了
这是年纪大的缘故 红影 发表于 2024-1-13 10:32
这个帖子里还出现了上节课讲过的遮罩mask，只是用法和上节课不太一样呢
mask我们早就使用的，比如那个中央挖孔的光盘 醉美水芙蓉 发表于 2024-1-13 11:31
欣赏老师新作品！好漂亮哦！
上午好 好帖，有许多新效果，又可以学习套用了！谢谢老师的代码！{:4_180:} 马黑黑 发表于 2024-1-13 10:39
右上角的山茶花既是点缀也是遮盖，挡住了办公的熊猫
原来是这样，聪明{:4_187:} 马黑黑 发表于 2024-1-13 10:40
这是小儿科
在这个帖子里的效果特别好呢{:4_187:} 马黑黑 发表于 2024-1-13 10:40
这是年纪大的缘故
哈哈，你还年轻，相对于千岁，你是青少年呢{:4_173:} 马黑黑 发表于 2024-1-13 10:41
mask我们早就使用的，比如那个中央挖孔的光盘
是的，用是用过，但没留意啊{:4_173:} 红影 发表于 2024-1-13 15:49
是的，用是用过，但没留意啊
{:4_173:}