本帖最后由 南无月 于 2023-7-16 10:31 编辑 <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;
--clipPath: '';
}
li-zi {
display: block;
position: absolute;
width: 10px;
height: 10px;
background: snow;
opacity: .46;
border-radius: 50%;
z-index: 10;
}
#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/648442c81ddac507ccea16e8.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;
}
css-doodle { position: absolute; }</style><div id="papa"><div id="mplayer"></div><css-doodle id="lrc">:doodle { @size: auto 4em; z-index:5; bottom: 20px; left:50px; --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></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=29535726" autoplay="autoplay" loop="loop"></audio><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 = Math.round(Math.random() * (papa.offsetWidth - ww - 600)),
tPos = Math.round(Math.random() * (papa.offsetHeight - ww - 160));
item.style.cssText += `
right: ${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 = 0;
if(item < -item / 2) item = papa.offsetWidth - 600;
if(item > papa.offsetHeight) item = 0;
if(item < -item / 2) item = papa.offsetHeight - 160;
item.style.right = 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) : (papa.style.setProperty('--state','running'), vid.play(), canMove = true);
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>
马黑黑 发表于 2023-7-15 08:11
现在粒子的实现机制，是往当前 DOM 里直接塞元素，如果元素的运动需要JS直接驱动，那么，粒子多的话，系 ...
用 @keyframes 关键帧动画驱动就是雨那贴子的处理方式。。
好好研究。。。老师你那里还不下雨吗{:4_170:}
南无月 发表于 2023-7-14 18:09
你家偶像近期出的都是电影哈。。。大屏幕进军的节奏。。
上半年也拍了一部电视剧，不知道什么时候能播出
南无月 发表于 2023-7-15 10:33
用 @keyframes 关键帧动画驱动就是雨那贴子的处理方式。。
好好研究。。。老师你那里还不下雨吗{:4_170: ...
木有
南无月 发表于 2023-7-15 10:29
好哒，影子周末快乐哈
抱抱月儿，周六快乐{:4_179:}
南无月 发表于 2023-7-15 10:29
嗯哪，现在没问题了
嗯嗯，应该是月儿调好了{:4_199:}
月月好，仔细看了你的代码，这些效果的融合小辣椒真不会，现在真的太佩服月月了，高高手了{:4_199:}
鱼儿 发表于 2023-7-15 11:40
上半年也拍了一部电视剧，不知道什么时候能播出
电视剧有点难说，看是握在谁家手里。。。
马黑黑 发表于 2023-7-15 12:05
木有
难怪天天擦汗{:4_170:}https://www.huachaowang.com/source/plugin/dsu_paulsign/img/emot/ch.gif
红影 发表于 2023-7-15 15:05
抱抱月儿，周六快乐
周日开心{:4_183:}
红影 发表于 2023-7-15 15:05
嗯嗯，应该是月儿调好了
这个修正版都是好的{:4_170:}老师过了目，出手改好才发的
醉美水芙蓉 发表于 2023-7-15 12:00
月儿厉害！做得漂亮！
谢谢水芙蓉鼓励哦{:4_187:}
醉美水芙蓉 发表于 2023-7-15 21:39
月儿机智，贴子做得完美！
{:4_183:}非常感谢，再次回复支持
小辣椒 发表于 2023-7-15 22:18
月月好，仔细看了你的代码，这些效果的融合小辣椒真不会，现在真的太佩服月月了，高高手了
小辣椒，这个代码是高手的代码，黑大神改过的。。。。
我之前做的我发在21楼你看看，真的问题极多。。。
我自己做好之后，把觉察到的问题列出来，一二三提给黑老师，他一个一个修改好，粒子也换了一种， 所以这个贴子后面跟了【修正版】{:4_170:}
千羽 发表于 2023-7-14 21:47
给棒棒的月儿点个大赞哈
回千羽的话在21楼，被我编辑成贴子了。。。{:4_183:}
南无月 发表于 2023-7-16 10:23
难怪天天擦汗
热{:4_181:}
南无月 发表于 2023-7-16 10:24
周日开心
这么热的天，还是喝茶吧{:4_180:}
南无月 发表于 2023-7-16 10:25
这个修正版都是好的老师过了目，出手改好才发的
月儿的学习效果特别出色，也和平日的努力相关呢{:4_187:}