【黑师代码】一剪梅（学习黑师《裸足女神》多层背景效果）
<style>#papa {
margin: 130px 0 0 calc(50% - 931px);
display: grid;
place-items: center;
width: 1700px;
height: 900px;
background:
url('https://pic.imgdb.cn/item/658ecb73c458853aefd29904.webp') no-repeat center/cover,
url('https://pic.imgdb.cn/item/65d5c9e69f345e8d03935bc8.png') no-repeat 100% 0,
url('https://pic.imgdb.cn/item/65d5ca639f345e8d03952392.png') no-repeat 100% 100%;
background-blend-mode: multiply, multiply;
box-shadow: 3px 3px 20px #000;
border: thick double Crimson;
z-index: 1;
overflow: hidden;
position: relative;
}
#papa::before {
position: absolute;
content: '';
inset: 620px 1420px 90px 90px;
background: url('https://pic.imgdb.cn/item/648d13911ddac507ccceebcc.png') no-repeat center/cover;
border-radius: 50%;
box-shadow: inset 0 0 40px rgba(255,0,0,.6), 0 0 12px rgba(0,0,0,.4);
filter: invert(0.2);
cursor: pointer;
pointer-events: auto;
transition: filter .75s;
mix-blend-mode: screen;
animation: turn 6s linear infinite var(--state);
}
#papa:hover::before { filter: unset; }
@keyframes turn { to { transform : rotate(1turn); } }
video {
position: absolute;
top: -76px;
width: 100%;
height: 110%;
object-fit: cover;
mix-blend-mode: screen;
opacity: .99;
}
</style>
<div id="papa">
<video src="https://img.tukuppt.com/video_show/2629112/00/01/74/5b498b31c08a2.mp4" autoplay loop muted></video>
</div>
<script>
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=82932');
myplayer.setBtnCss(`
background: url('https://pic.imgdb.cn/item/648d13911ddac507ccceebcc.png') no-repeat center/cover;
width: 100px;
height: 100px;
bottom: 140px;
left:140px;
`);
myplayer.setLrcCss('bottom: 30px; font-size: 26px;--bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); color: #fff;');
myplayer.lrcAr = [
[-0.92,"单曲：一剪梅",1.8],
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
};
</script>
<br><br><br><br><br><br><br><br><br> 黑黑的是一图多用，月儿这个弄了多个图图呢，又是一种拓展呢{:4_199:} 月儿的ps制图很赞的，令人羡慕啊{:4_187:} 青出于蓝，而快胜了{:4_178:} 多种黑技创造性的和谐的运用！一个字美！ 月儿老师的精美制作 欣赏学习哈~~{:4_204:}
咱俩共通点 歌词底色都用白色哈~~{:4_205:} 醉美水芙蓉 发表于 2024-2-21 19:26
欣赏月儿精美单图！很有韵味的歌曲！
哎，水妞晚上好呀。。
这歌很经典的呀。。{:4_173:} 醉美水芙蓉 发表于 2024-2-21 19:26
月儿速度又快又好！
感谢水妞鼓励哈。。{:4_173:} 红影 发表于 2024-2-21 19:34
黑黑的是一图多用，月儿这个弄了多个图图呢，又是一种拓展呢
{:4_173:}我用的这个图不适合叠起来。只好再用一张 南无月 发表于 2024-2-21 20:09
我用的这个图不适合叠起来。只好再用一张
月儿的小脑筋很灵活的{:4_205:} 红影 发表于 2024-2-21 19:34
月儿的ps制图很赞的，令人羡慕啊
谢谢影子鼓励哈，图图我知道很{:4_187:}一般，正在努力学习中。。 樵歌 发表于 2024-2-21 20:03
青出于蓝，而快胜了
感谢樵管一直鼓励支持，努力加油中。。{:4_190:} 樵歌 发表于 2024-2-21 20:04
多种黑技创造性的和谐的运用！一个字美！
{:4_187:}非常感谢樵管肯定。。 朵拉 发表于 2024-2-21 20:06
月儿老师的精美制作 欣赏学习哈~~
咱俩共通点 歌词底色都用白色哈~~
哇哦，那太巧了，我觉得白色百搭。。{:4_187:} 红影 发表于 2024-2-21 20:11
月儿的小脑筋很灵活的
{:4_173:}这个很自然的事都能夸得这么自然，影子你真是厉害 南无月 发表于 2024-2-21 20:11
谢谢影子鼓励哈，图图我知道很一般，正在努力学习中。。
你还努力学习啊，我这样不会的更赤了脚也赶不上了{:4_189:} 南无月 发表于 2024-2-21 20:21
这个很自然的事都能夸得这么自然，影子你真是厉害
每个人对页面的协调的处理都是不一样的，这个真的能学到很多呢{:4_187:} 我很喜欢这首歌，谢谢！分享了。