王菲 - 流星
本帖最后由 马黑黑 于 2022-8-12 07:37 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/Pic/81/nightsky.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
.meteor { position: absolute; width: 3px; height: 3px; left: 100px; top: 100px; border-radius: 50px; background: lightblue; }
@keyframes flow { from { transform: translate(var(--startX), var(--startY));opacity: 1;} to { transform: translate(var(--endX), var(--endY)); opacity: 0; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">Loading ...</span>
<span id="disc"></span>
</div>
<script>
let stars = new Array(100), aud = new Audio();
let w = papa.offsetWidth, h = papa.offsetHeight;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
['0.06','王菲 - 流星'],
['1.06','词：周耀辉'],
['2.06','曲：刘以达'],
['26.04','我在海角你却在天边'],
['31.06','两颗注定一起出现的星星'],
['37.05','遥遥呼应却永远走不近'],
['42.09','我和你在暗中互相辉映'],
['48.07','究竟这样是缠绵还是互相毁灭'],
['59.06','已经太久无法承受'],
['65.06','我要逃出你这温柔的宇宙'],
['74.02','化作一颗流星不管飞向那里'],
['79.10','我身后有闪烁的回忆'],
['85.09','我是一颗流星我有一个希望离开你'],
['93.05','我自己美丽地消逝'],
['123.03','我们之间像没有甚幺'],
['128.07','只有一样流着眼泪的银河'],
['134.05','你是牛郎我不敢做织女'],
['139.08','我不要延续凄凉的诗歌'],
['145.09','不想这样的缠绵'],
['150.07','不要互相毁灭'],
['156.06','已经太久无法承受'],
['162.03','是我再次回到凡尘的时候'],
['171.04','化作一颗流星不管飞向哪里'],
['176.10','我身后有闪烁的回忆'],
['182.05','我是一颗流星只有一个希望离开你'],
['190.01','我自己'],
['195.04','美丽化作一颗流星不管飞向哪里'],
['202.06','我身后有你我的回忆'],
['208.02','数不尽的流星只有一个希望'],
['213.10','我寻找'],
['216.02','我自己美丽故事']
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=37993018.mp3';
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
for(j = 0; j < stars.length; j ++) {
let star = document.createElement('span');
star.className = 'meteor';
let x1 = num(0, w-5);
let y1 = num(0, h/4);
let x2 = x1 + num(50, 100);
let y2 = y1 + num(20, 50);
star.style.cssText += `width: ${num(1,4)}px; height: ${num(1,4)}px; left: ${x1}px; top: ${y1}px; --startX: ${x1}px; --startY: ${y1}px; --endX: ${x2}px; --endY: ${y2}px; animation: flow linear 1s ${j*.1}s infinite`;
papa.appendChild(star);
stars = star;
}
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
lrcbox.innerHTML = lrcAr;
}
}
})
</script>
有个沙发，这个流动速度可以调不 黑黑朋友早晨好！这组流星的设计很巧妙。 天空像嵌满了璀璨的宝石，还有宝石缓缓坠下，这效果太美了{:4_199:} 本帖最后由 加林森 于 2022-8-12 11:16 编辑
老黑又制作了一个新的作品。漂亮的流星在夜空划过。真是太美了！赞！{:4_199:} 加林森 发表于 2022-8-12 11:14
老黑又制作了一个新的作品。漂亮的流星在夜空划过。真是太美了！赞！
这个没有用画布，拖尾效果实现起来很困难 绿叶清舟 发表于 2022-8-12 09:28
有个沙发，这个流动速度可以调不
可以。JS调用了 CSS 的 关键帧动画，在这句修改红色部分的数值，比如修改为 0.5：
star.style.cssText += `width: ${num(1,4)}px; height: ${num(1,4)}px; left: ${x1}px; top: ${y1}px; --startX: ${x1}px; --startY: ${y1}px; --endX: ${x2}px; --endY: ${y2}px; animation: flow linear 1s ${j*.1}s infinite`; 梦油 发表于 2022-8-12 10:29
黑黑朋友早晨好！这组流星的设计很巧妙。
缺个拖尾效果 红影 发表于 2022-8-12 11:01
天空像嵌满了璀璨的宝石，还有宝石缓缓坠下，这效果太美了
星星，不像而已{:5_106:} 马黑黑 发表于 2022-8-12 12:13
这个没有用画布，拖尾效果实现起来很困难
嗯嗯。我先看看。 加林森 发表于 2022-8-12 12:18
嗯嗯。我先看看。
{:4_181:} 马黑黑 发表于 2022-8-12 12:54
喝 马黑黑 发表于 2022-8-12 12:16
缺个拖尾效果
那就更好了 梦油 发表于 2022-8-12 14:09
那就更好了
嗯，用另一个方式就可以容易实现 马黑黑 发表于 2022-8-12 18:08
嗯，用另一个方式就可以容易实现
你的办法很多啊。 梦油 发表于 2022-8-12 18:13
你的办法很多啊。
有备用方法 这个是新的效果啊，白天我来不及看，等一下回家电脑看看，黒黑新的每天都有{:4_178:} 小辣椒 发表于 2022-8-12 19:18
这个是新的效果啊，白天我来不及看，等一下回家电脑看看，黒黑新的每天都有
嗯，这个简单实现流星，没尾巴 马黑黑 发表于 2022-8-12 19:26
嗯，这个简单实现流星，没尾巴
我发现了，那个有尾巴的漂亮一点{:4_189:} 小辣椒 发表于 2022-8-12 19:29
我发现了，那个有尾巴的漂亮一点
是的是的，人没尾巴真实遗憾{:4_196:}
页:
[1]
2