许愿树（学习黑师《信仰》播放器及粒子效果【修正版】）
本帖最后由 南无月 于 2023-7-14 09:36 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 720px);
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('https://pic.imgdb.cn/item/64b0a5261ddac507ccb921a1.gif') no-repeat center/cover;
cursor: pointer;
z-index: 6;
}
#vid {
position: absolute;
width: 1300px;
height: 120%;
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 = 120, canMove = true, lzAr = [];
let mlAr = Array.from({length: total}, (v) => Math.random() * 1.6 - .1),
mtAr = Array.from({length: total}, (v) => Math.random() * 0.2 - 1.2);
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('li-zi');
let ww = 3 + Math.round(Math.random() * 12),
lPos = 600 + Math.round(Math.random() * 650),
tPos = 1 + Math.round(Math.random() * 850);
item.style.cssText += `
left: ${lPos}px;
top: ${tPos}px;
width: ${ww}px;
height: ${ww}px;
background: #${Math.random().toString(16).substr(-6)};
`;
let ar = ;
lzAr.push(ar);
papa.appendChild(item);
});
let move = () => { /* 粒子移动 */
if(canMove) {
lzAr.forEach((item,key) => {
item += mlAr;
item += mtAr;
if(item > papa.offsetWidth) item = 600;
if(item < 600) item = papa.offsetWidth;
if(item > 600) item = 1;
if(item < 1) item = 600;
item.style.left = item + 'px';
item.style.top = item + 'px';
});
}
requestAnimationFrame(move);
};
move();
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);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("https://pic.imgdb.cn/item/64b0a6631ddac507ccbbca93.png") no-repeat center/cover')
: (papa.style.setProperty('--state','running'), vid.play(), canMove = true, mplayer.style.background='url("https://pic.imgdb.cn/item/64b0a5261ddac507ccb921a1.gif") no-repeat center/cover');
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');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) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script> @马黑黑 粒子数量由160调到120..而且不同的电脑看粒子飞的速度并不相同。。 @鱼儿 来瞧瞧，这个贴子的名子是根据《玉骨遥》那棵树起的。。有没有点点梦幻的感觉{:4_170:} 月儿厉害，做雨丝效果就能找到下雨的视频，现在做粒子泡泡，就用了泡泡视频相配。
这个粒子也调整了位置，全部放到右侧。还加了歌词同步。欣赏月儿好帖{:4_199:} 小蝴蝶的播放器按钮的暂停也是那个唱歌的猫的暂停效果吧，很漂亮。
月儿总能将各帖里的效果完美结合，很赞{:4_199:} 南无月 发表于 2023-7-14 09:41
@马黑黑 粒子数量由160调到120..而且不同的电脑看粒子飞的速度并不相同。。
显示刷新率影响粒子速度。
粒子过多，浏览器负担会加重。 南无月 发表于 2023-7-14 09:42
@鱼儿 来瞧瞧，这个贴子的名子是根据《玉骨遥》那棵树起的。。有没有点点梦幻的感觉
我要许愿《热烈》大卖！{:4_196:} 红影 发表于 2023-7-14 10:24
月儿厉害，做雨丝效果就能找到下雨的视频，现在做粒子泡泡，就用了泡泡视频相配。
这个粒子也调整了位置， ...
影子真好啊，我找到这个视频的时候就觉得太喜欢了{:4_173:}
粒子位置是老师帮整的，原来没这么刚好。。所以是修正版{:4_187:} 红影 发表于 2023-7-14 10:26
小蝴蝶的播放器按钮的暂停也是那个唱歌的猫的暂停效果吧，很漂亮。
月儿总能将各帖里的效果完美结合，很赞 ...
就是看到这个小播比较新颖才想着跟做，没想到一动手都是问题。。{:4_170:} 马黑黑 发表于 2023-7-14 12:54
显示刷新率影响粒子速度。
粒子过多，浏览器负担会加重。
嗯嗯，粒子飞得快慢还是比较明显的，原来是刷新率的问题。
调少点，感觉没那么拥挤 鱼儿 发表于 2023-7-14 13:31
我要许愿《热烈》大卖！
我要帮鱼儿许愿，7.28热烈大卖！！{:4_170:} 鱼儿 发表于 2023-7-14 13:31
我要许愿《热烈》大卖！
你家偶像近期出的都是电影哈。。。大屏幕进军的节奏。。 南无月 发表于 2023-7-14 18:05
影子真好啊，我找到这个视频的时候就觉得太喜欢了
粒子位置是老师帮整的，原来没这么刚好。。 ...
不管怎么说，这个帖子很完美呀，月儿真棒。{:4_199:} 南无月 发表于 2023-7-14 18:06
就是看到这个小播比较新颖才想着跟做，没想到一动手都是问题。。
没感觉有问题啊。很好的{:4_187:} 很亮眼的制作，好美啊，月儿掌控代码的能力真让人佩服呢{:4_187:} 给棒棒的月儿点个大赞哈{:4_187:}{:4_199:}{:4_178:} 南无月 发表于 2023-7-14 18:08
嗯嗯，粒子飞得快慢还是比较明显的，原来是刷新率的问题。
调少点，感觉没那么拥挤
现在粒子的实现机制，是往当前 DOM 里直接塞元素，如果元素的运动需要JS直接驱动，那么，粒子多的话，系统资源会吃紧，但用 @keyframes 关键帧动画驱动粒子的话，粒子多一些也无所谓。 红影 发表于 2023-7-14 20:09
不管怎么说，这个帖子很完美呀，月儿真棒。
{:4_187:}好哒，影子周末快乐哈 红影 发表于 2023-7-14 20:10
没感觉有问题啊。很好的
嗯哪，现在没问题了{:4_187:} 千羽 发表于 2023-7-14 21:45
很亮眼的制作，好美啊，月儿掌控代码的能力真让人佩服呢
{:4_183:}这个图是乱融的作业，调调越整越暗