飞天乐舞（学习黑师茉莉花&粒子播放效果）
本帖最后由 雨中悄然 于 2023-4-8 08:39 编辑 <br /><br /><style>#papa { margin:-80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://s1.ax1x.com/2023/04/07/ppT0ZKe.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
.stage {
left: 200px;
width: 804px;
height:640px;
overflow: hidden;
position: relative;
}
.particle {
width: var(--ww);
height: var(--ww);
left: 50%;
top: 70%;
background: #eee;
display: block;
position: absolute;
filter: blur(1px);
animation: up var(--ss) linear infinite;
}
.particle::before, .particle::after {
position: absolute;
content: '';
width: inherit;
height: inherit;
background: #eee;
}
.particle::before {
top: -40px;
animation: up calc(var(--ss) + 1s) 1.2s linear infinite;
}
.particle::after {
top: -40px;
animation: up calc(var(--ss) - 1s) .5s linear infinite;
}
@keyframes up {
to { transform: translate(var(--hh),calc(var(--hh) / 1.5)) rotate(var(--deg)); }
}
#lrc { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); height: 50px; font: bold 40px/50px sans-serif; background: transparent; color: gray; display: grid; place-items: center start; pointer-events: none;--motion: cover2; --state: running; --tt: 1s; }
#lrc::before, #lrc::after { position: absolute; content: ''; }
#lrc::before { content: attr(data-lrc); width: 0%; height: 100%; color: CornflowerBlue; white-space: pre; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }
#lrc::after { width: 100px; height: 100px; left: -100px; border-radius: 50%; background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 4s infinite linear var(--state); }
@keyframes cover1 { to { width: 100%; } }
@keyframes cover2 { to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa"><div class="stage">
<div class="particle"></div>
</div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=26902039" autoplay="autoplay" loop="loop"></audio>
<script>
let stage = document.querySelector('.stage');
let ww = 3;
let total = 100;
let pStr = '';
for(j=0; j< total; j++){
let ss = getNum(5,20);
let deg = getNum(15,720);
let hh = -500;
pStr += `<span class='particle' style='--ss: ${ss}s; --hh: ${hh}px; --deg: ${deg}deg; --ww: ${ww}px;)'></span>`;
}
stage.innerHTML = pStr;
let au = document.createElement('iframe');
au.src = 'https:///music.163.com/outchain/player?type=2&id=1471588618&auto=1&height=66';
au.style.display = 'none';
stage.appendChild(au);
function getNum(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
lrc.onclick = () => aud.paused ? aud.play() :aud.pause();
</script> @马黑黑 老师我交份作业 {:4_187:} 十分完美！赞 先去看看黑黑的教程{:4_173:} 发现这个播放器是自动播放，我还没有点击音乐出来了{:4_199:} 悄然很棒加了粒子效果进去{:4_199:} 前奏有点长啊，开始还以为是纯音乐的，后面终于歌曲出来了，第一次欣赏这歌{:4_178:} 两首音乐，好像点击桃花按钮暂停歌曲后还有音乐？ 这个制作真漂亮，两种效果在这个帖子里完美结合。悄然聪明{:4_199:}
好喜欢那飞天女子，特别喜欢这些图图。字体效果也极好，真漂亮{:4_431:} 马黑黑 发表于 2023-4-7 18:27
十分完美！赞
好的。我记得搜坛时粒子效果还有一个满天飞的彩色的，怎么也找不到，你还记得标题吗。 小辣椒 发表于 2023-4-7 19:00
先去看看黑黑的教程
好哒，小辣椒{:4_187:} 小辣椒 发表于 2023-4-7 19:20
发现这个播放器是自动播放，我还没有点击音乐出来了
抄的代码，变自动档的也行吧{:4_170:} 小辣椒 发表于 2023-4-7 19:20
悄然很棒加了粒子效果进去
第一次试着加别的效果，居然成了也很惊喜{:4_170:} 小辣椒 发表于 2023-4-7 19:26
前奏有点长啊，开始还以为是纯音乐的，后面终于歌曲出来了，第一次欣赏这歌
有歌词的。
先找到的是飞天美人儿，想用它做贴，再整了个背景，加完标题后，为了整个贴子协调，就只能找有歌词的飞天的音乐了。就找到了这首，我也是第一次听{:4_173:} 雨中悄然 发表于 2023-4-8 08:42
好的。我记得搜坛时粒子效果还有一个满天飞的彩色的，怎么也找不到，你还记得标题吗。
帖子太多，我也不记得了 红影 发表于 2023-4-7 19:34
两首音乐，好像点击桃花按钮暂停歌曲后还有音乐？
是粒子效果的背景音乐没去掉。刚处理了一下。。 红影 发表于 2023-4-7 19:36
这个制作真漂亮，两种效果在这个帖子里完美结合。悄然聪明
好喜欢那飞天女子，特别喜欢这些图图 ...
各种代码使用尝试学习练习中。。
那美人儿我也十分喜欢，哈哈。。。{:4_183:} 马黑黑 发表于 2023-4-8 08:46
帖子太多，我也不记得了
{:4_170:}作者也不记得，这么可遇不可求的。 雨中悄然 发表于 2023-4-8 08:52
作者也不记得，这么可遇不可求的。
实在太多了，我的记忆力也不好，只记得7秒前的事情 马黑黑 发表于 2023-4-8 08:56
实在太多了，我的记忆力也不好，只记得7秒前的事情
的确多。很多效果有很深的印象，比如视频裁成象水晶球一样的，翻书效果，八爪外星怪物，{:4_170:}
我来的真的是晚。。。