<style>
#papa {
margin: 0 0 0 calc(50% - 640px);
width: 1300px;
height: 768px;
border: 1px solid gray;
background: lightblue url('https://s1.ax1x.com/2023/07/13/pChTpAx.jpg') no-repeat center/cover;
box-shadow: 0 0 8px 0 #000;
position: relative;
overflow: hidden;
display: grid;
place-items: center;
--clipPath: '';
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
background: snow;
opacity: .46;
border-radius: 50%;
}
#papa::after {
position: absolute;
content: '';
transition: 1s;
}
#papa::after { /* 月亮 */
width: 60px;
height: 60px;
background: linear-gradient(45deg,antiquewhite 0%, snow 90%, snow 100%);
border-radius: 50%;
left: calc(80% - 52px);
top: 340px;
z-index: 11;
box-shadow: 0 0 30px 0px lightblue, 0 0 100px 0 white;
}
#papa:hover:after { transform: scale(1.2); }
#mplayer {
position: absolute;
width: 128px;
height: 128px;
left: calc(56% - 33px);
bottom: 200px;
background: url('../pic/hudie_qr.gif') no-repeat center/cover;
cursor: pointer;
z-index: 6;
}

#vid {
position: absolute;
width: 1500px;
height: 100%;
border-radius: 2%;
opacity: .16;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
</style>

<div id="papa">
<div id="mplayer"></div>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
position: absolute;
bottom: 10px;
--geci: 'css-doodle player';
--motion: cover2;
--tt: 1s;
}
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: AliceBlue;
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color:LightSkyBlue;
overflow: hidden;
animation: var(--motion) var(--tt) linear forwards var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</css-doodle>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/44/85/6041e3cc191f7.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29535726" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

(function() {
let total = 160, canMove = true, lzAr = [];
let mlAr = Array.from({length: total}, (v) => Math.random() * 1.5 - .8),
mtAr = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('li-zi');
let ww = 4 + Math.round(Math.random() * 12),
lPos = 700 + Math.round(Math.random() * 600),
tPos = 160 + Math.round(Math.random() * 600);
item.style.cssText += `
left: ${lPos}px;
top: ${tPos}px;
width: ${ww}px;
height: ${ww}px;
background: #${Math.random().toString(16).substr(-6)};
`;
let ar = [item,lPos,tPos,ww];
lzAr.push(ar);
papa.appendChild(item);
});

let move = () => { /* 粒子移动 */
if(canMove) {
lzAr.forEach((item,key) => {
item[1] += mlAr[key];
item[2] += mtAr[key];
if(item[1] > papa.offsetWidth) item[1] = 700;
if(item[1] < 700) item[1] = papa.offsetWidth;
if(item[2] > 600) item[2] = 160;
if(item[2] < 160) item[2] = 600;
item[0].style.left = item[1] + 'px';
item[0].style.top = item[2] + 'px';
});
}
requestAnimationFrame(move);
};
move();

let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
[1.04,"单曲：许愿树",2.2],
[3.25,"歌手：许飞",2.3],
[5.51,"所属专辑：热门华语245",1.0],
[6.5,"学习黑师《信仰》播放器及粒子效果",7.2],
[13.66,"一棵树在 野草的边上",4.8],
[19.76,"不再东张西望",3.2],
[25.69,"秋风叶落 无边的想象",4.7],
[31.75,"没有前方远方",3.3],
[37.77,"一棵树在 旷野的中央",4.7],
[43.71,"还有一点点倔强",3.3],
[49.67,"想必寂寞 早已经平常",4.8],
[55.73,"不用离乡还乡",3.3],
[61.65,"四季的回忆 一个人守护",4.8],
[67.86,"轮回的沧桑 一个人欣赏",4.5],
[73.71,"就让这山风 做我的衣裳",4.7],
[78.95,"心里还有个 不说的愿望",4.0],
[90.05,"我和树在 望你的山梁",4.9],
[96.17,"时光已不再流淌",3.3],
[102.08,"等我忘记了你的模样",4.9],
[108.17,"从此不再独自流浪",3.4],
[114.27,"四季的回忆 一个人守护",4.6],
[120.22,"轮回的沧桑 一个人欣赏",4.6],
[126.07,"就让这山风 做我的衣裳",4.8],
[131.39,"心里还有个 不说的愿望",4.2],
[141.55,"啦啦 啦啦啦",2.3],
[144.23,"啦啦啦啦啦",1.9],
[147.18,"啦啦啦啦啦",2.7],
[150.25,"啦啦啦啦啦",1.7],
[153.16,"就让这山风 做我的衣裳",4.7],
[158.41,"心里还有个 不说的愿望",4.1],
[164.72,"心里还有个 不说的愿望",6.4]
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);

let mState = () => aud.paused
? (papa.style.setProperty('--state','paused'), vid.pause(), canMove = false, mplayer.style.background='url("../pic/hudie_qr.png") no-repeat center/cover') 
: (papa.style.setProperty('--state','running'), vid.play(), canMove = true, mplayer.style.background='url("../pic/hudie_qr.gif") no-repeat center/cover');

let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

</script>

前一篇: 《工业风》修正代码
下一篇: 无罔（圆形直条&斜条频谱封装代码）