【作业贴】簇拥烈日的花(学习黑师css-doodle粒子纷飞效果)
本帖最后由 南无月 于 2023-5-16 20:02 编辑 <br /><br /><style>#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: tan url('https://s1.ax1x.com/2023/05/16/p9RGsW4.jpg');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative; overflow: hidden;--state: paused;}css-doodle{position: absolute;}</style> <div id="papa"> <css-doodle id="mplayer"> :doodle { @grid: 2 / 300px 60px; color: var(--color); bottom:40px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: Indigo; } /* 时间信息 : 左 */ @nth(1) { @place: 25% 80%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: var(--size); clip-path: @shape( fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t); ); @place: 50% 35%; background: var(--color); animation: rot 6s infinite linear var(--state); } /* 时间信息 : 右 */ @nth(3) { @place: 75% 80%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 80%; @size: 100% 2px; background: #bbb; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } } @keyframes rot { to { transform: rotate(1turn); } } </css-doodle> <css-doodle id="lrc"> :doodle { @size: auto 4em; top: 0; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: Teal; /* 同步歌词颜色 */ 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><css-doodle id="mp">:doodle {@grid: 16 / 1024px 640px;border: 1px solid tan;perspective: 800px;}:container {transform-style: preserve-3d;background: radial-gradient(circle,navy);}@size: @r(3,6)px;border-radius: 50%;@place: @r(660,340)px @r(660,120)px;background: rgba(@m3(@r(255)),@r(.6, .9));transform: rotate(@r(720)deg) translate3d(@r(500)px, @r(300)px, @r(1000)px);animation: fly @r(20,40)s @r(-20,0)s infinite linear var(--state);@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }</css-doodle> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1896178370" autoplay="" loop=""></audio> </div> <script>(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
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 mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
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('seeked', () => calcKey());
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.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;};
mplayer.onmousemove = (e) => {let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);mplayer.style.cursor = cursors;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;};
})();</script> 100+{:4_431:} 樵歌 发表于 2023-5-16 19:47
100+
{:4_187:} 醉美水芙蓉 发表于 2023-5-16 18:11
速度好快！做得漂亮！
{:4_187:}谢谢鼓励 @马黑黑 粒子作业交一份{:4_187:}辛苦老师瞧一眼 制作很漂亮。月儿真棒{:4_187:} 红影 发表于 2023-5-16 20:49
制作很漂亮。月儿真棒
{:4_187:}影子晚上好 南无月 发表于 2023-5-16 20:50
影子晚上好
所有的操作都是css-doodle制作的，真好，学习了{:4_187:} 红影 发表于 2023-5-16 20:51
所有的操作都是css-doodle制作的，真好，学习了
嗯嗯，是最近练习的内容{:4_187:} 这个很活泼 南无月 发表于 2023-5-16 20:48
高高手{:4_187:} 当觉得有个别粒子太大，希望它能小一点，那样的话，可以调整 perspective 值。我的示例是 800，可以是1000、2000、30000，建议在 1500左右。
perspective设置景深，依据是多方面的，一般也会考虑帖子的高宽尺寸。 南无月 发表于 2023-5-16 20:53
嗯嗯，是最近练习的内容
这个背景很适合粒子纷飞的效果呢{:4_187:} 马黑黑 发表于 2023-5-16 21:16
这个很活泼
有点童趣 樵歌 发表于 2023-5-16 21:31
高高手
感谢鼓励 南无月 发表于 2023-5-16 22:41
有点童趣
童趣好 马黑黑 发表于 2023-5-16 21:39
当觉得有个别粒子太大，希望它能小一点，那样的话，可以调整 perspective 值。我的示例是 800，可以是1000 ...
好的，我说怎么有的飞到屏外的样子 红影 发表于 2023-5-16 21:42
这个背景很适合粒子纷飞的效果呢
蒲公英有点飘的到处都是，类似 南无月 发表于 2023-5-16 22:42
好的，我说怎么有的飞到屏外的样子
Z轴的值，比如 translateZ 或 translate3d(x,y,z)的第三个参数，也会影响例子的大小。Z轴是屏幕前人眼和被观察对象的距离，它的值越大，距离越大，个子越小，反之，距离越大，个子越大
页:
[1]
2