一束光(学习黑师2023.7.4新粒子效果)
本帖最后由 南无月 于 2023-7-5 07:40 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/07/04/pCsWo8S.jpg')no-repeat center / cover; ;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
li-zi {
display: block;
position: absolute;
width: 10px;
height: 10px;
background: snow;
opacity: .30;
border-radius: 50%;
z-index: 10;
}
#vid {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
opacity: .10;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
css-doodle { position: absolute; }</style><div id="papa"><!-- 播放器 --><css-doodle grid="1" id="mplayer">:doodle { @size: 260px; cursor: pointer; right: 580px; top: 220px; opacity: .96;z-index: 4; }clip-path: @shape(points: 360;frame: 18;turn: .5;scale: .08;x: 9 * cos(10t) + cos(44t);y: 9 * sin(10t) + sin(44t););background: linear-gradient(DeepSkyBlue,Orange,MediumPurple);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }</css-doodle><!-- 歌词 --><css-doodle id="lrc">:doodle { @size: auto 4em; z-index:5; bottom: 10px;--geci: " css-doodle player"; --motion: cover2; --tt: 1s; }display: grid;place-items: center start;:before, :after {content: var(--geci);color: Honeydew;font: bold 2em sans-serif;text-shadow: 1px 1px 2px #000;white-space: pre;}:after {position: absolute;width: 0;color: Sienna;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/08/36/5d208d001e9c2.mp4" autoplay="" loop="" muted=""></video> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1988532821" autoplay="autoplay" loop="loop"></audio></div><script>(function() {
let total = 100, 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 = 5 + Math.round(Math.random() * 50),
lPos = Math.round(Math.random() * (papa.offsetWidth - ww)),
tPos = Math.round(Math.random() * (papa.offsetHeight - ww));
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 = 0;
if(item < -item / 2) item = papa.offsetWidth;
if(item > papa.offsetHeight) item = 0;
if(item < -item / 2) item = papa.offsetHeight;
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) : (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>
@马黑黑 交一份今天的粒子作业。。
存在问题：不知道怎么控制粒子可以停下来{:4_173:} 好漂亮!喜欢 欣赏 月月速度的，中午看见黑黑的教程，现在出来了，加的歌词同步好听{:4_199:} 不敢多写字，怕被吃字{:4_170:} 月月特棒{:4_178:} 进来就看到月儿的创意棒棒哒{:4_187:} 有诗意的亮眼画面，歌儿也好听{:4_181:} 南无月 发表于 2023-7-4 18:37
@马黑黑 交一份今天的粒子作业。。
存在问题：不知道怎么控制粒子可以停下来
这个应该会了。粒子运动函数里，有 if(canMove) { ... }，canMove 也在前面声明了，是个布尔变量。如此，在 mState() 函数中，加入它：
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause(), canMove = false) : (papa.style.setProperty('--state','running'), vid.play(), canMove = true); 创意与设计，再到实现手段，都显得上了水平。粒子的控制，要找到入口。 小文 发表于 2023-7-4 19:00
好漂亮!喜欢
感谢小文临贴回复{:4_187:} 路人甲 发表于 2023-7-4 19:00
欣赏
感谢路人临贴回复{:4_187:} 小辣椒 发表于 2023-7-4 19:25
月月速度的，中午看见黑黑的教程，现在出来了，加的歌词同步好听
小辣椒好！照着贴子搜的光的歌，听起来不错就用了{:4_187:}第一次听 小辣椒 发表于 2023-7-4 19:26
不敢多写字，怕被吃字
好哒，明白的{:4_187:} 小辣椒 发表于 2023-7-4 19:26
月月特棒
谢谢小辣椒鼓励{:4_187:} 醉美水芙蓉 发表于 2023-7-4 19:54
我曾遇到一束光，歌曲好听！月儿制作漂亮！
谢谢水芙蓉肯定哦{:4_187:} 千羽 发表于 2023-7-4 20:33
进来就看到月儿的创意棒棒哒
千羽来了，过来抱个{:4_183:}粒子作业，看这着版粒子挺漂亮就跟了一贴 千羽 发表于 2023-7-4 20:35
有诗意的亮眼画面，歌儿也好听
这首歌还不错，听起来不吵耳朵{:4_170:}