【黑师代码】上古情歌（学习黑师2024《半妖倾城》双视频双小播效果）
<style>#papa {
position: relative;
margin:130px 0 20px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20240524yao1.webp') no-repeat center/cover;
box-shadow: 2px 2px 6px #333;
overflow: hidden;
--state: running;
}
#mama { position: absolute; width: 800px; height: 200px;left:380px;top:200px; }
.text{ font-size: 64px; font-weight: bold; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; }
.text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; }
.text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; }
.text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
.vid {
position: absolute;bottom: 0;left:0px;
width: 100%;
height: calc(100% + 85px);
object-fit: cover;
mix-blend-mode: screen; opacity: .9;
}
.vid:nth-of-type(2) { position: absolute;bottom: 0;left:0px;
width: 100%;
height: calc(100% + 85px);
object-fit: cover;
mix-blend-mode: screen; opacity: .4; }
.vid:nth-of-type(3) {
position: absolute;
border-radius: 50%;
top: 20px;
left:500px;
width: 30%;
height:30%;
object-fit: cover;
mix-blend-mode: screen;opacity: .99;
}
.player {
position: absolute;
left: 1315px;
top: 700px;
width: 120px;
height: 120px;
border-radius: 50%;
border: 6px groove tan;
border-color: black white black;
opacity: .9;
transition: 1s;
cursor: pointer;
}
.player:hover {
position: absolute;
filter: hue-rotate(100deg) drop-shadow(0 0 30px red);
border-color: purple red plum;
}
.player::before, .player::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: radial-gradient(snow, purple, pink, lightblue, transparent);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
animation: rot 8s linear infinite var(--state);
}
.player::after { animation-delay: -1s; }
.player:nth-of-type(2) { left: 25px;
top: 760px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/02/f5c7f3209b4251b698fff5cb8785a2f5.mp3" autoplay loop></audio>
<div id="mama">
<svg width="100%" height="100%" style="border: 0px solid">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">学习黑师《半妖倾城》作业</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">学习黑师《半妖倾城》作业</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">学习黑师《半妖倾城》作业</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">学习黑师《半妖倾城》作业</text>
</svg>
</div>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/33/69/62f0d6e506540.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/06/5b50065e45b04.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/41/5b42c3cfabbe3.mp4" loop muted></video>
<div class="player" title="播放/暂停"></div>
<div class="player" title="播放/暂停"></div>
</div>
<script>
var players = document.querySelectorAll('.player'), vids = document.querySelectorAll('.vid');
aud.onplaying = aud.onpause = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '.player',
lrc_css: 'left: 44%; transform: translate(-50%);bottom: 26px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); opacity: .6;font-size: 36px;color: #fff;',
});
};
let geci = [
[-1.95,"单曲：桃花诺",2.4],
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
@马黑黑白老师来瞧瞧，跟了一个今天的妖贴{:4_187:} 原曲名字桃花诺，拿了之前做过的歌词来用。。
桃花诺跟画风严重不搭，就换了个歌词里的当标题{:4_170:} 这个好，有仙气 马黑黑 发表于 2024-5-24 21:02
这个好，有仙气
确定不是半仙{:4_170:} 南无月 发表于 2024-5-24 21:06
确定不是半仙
是全仙 马黑黑 发表于 2024-5-24 21:07
是全仙
那是可以飞升的。{:4_173:} 南无月 发表于 2024-5-24 21:23
那是可以飞升的。
当然可以 哇，这个漂亮，月儿加了这么多视频，把气氛烘托得满满{:4_199:} 还加了特效文字，这个很点睛。非常漂亮的制作{:4_187:} 两个小播放在两个星球上，随着星球一起运转。捧球的手指半透明，非常朦胧的效果。
月儿的背景选得好，用的视频也好，非常用心的制作{:4_199:} 马黑黑 发表于 2024-5-24 21:59
当然可以
那敢情好 红影 发表于 2024-5-25 08:59
哇，这个漂亮，月儿加了这么多视频，把气氛烘托得满满
谢谢影子支持鼓励。。{:4_187:} 红影 发表于 2024-5-25 09:00
还加了特效文字，这个很点睛。非常漂亮的制作
这个字很是梦幻，刚好拿来当个标题{:4_173:} 红影 发表于 2024-5-25 09:02
两个小播放在两个星球上，随着星球一起运转。捧球的手指半透明，非常朦胧的效果。
月儿的背景选得好，用的 ...
这个就是纯套用贴子{:4_173:} 南无月 发表于 2024-5-25 10:40
那敢情好
嗯呐 南无月 发表于 2024-5-25 10:40
谢谢影子支持鼓励。。
那个蓝色粒子视频特别大气，斜光视频特别浪漫，同心环的视频特别玄幻，加在一起效果太好了{:4_187:} 南无月 发表于 2024-5-25 10:41
这个字很是梦幻，刚好拿来当个标题
用在这里特别好，月儿真是灵活运用的典范{:4_199:} 南无月 发表于 2024-5-25 10:41
这个就是纯套用贴子
如何选择背景和组合各种元素也是很考验功夫的，月儿功夫高{:4_187:} 马黑黑 发表于 2024-5-25 11:17
嗯呐
{:4_187:}{:4_191:}