|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<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; }
/* 画布：定位在帖子上半部 */
#canv { position: absolute; width: 1024px; height: 350px; left: 0; top: 0; }
/* 光盘关键帧动画 */
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<!-- 帖子外框开始 -->
<div id="papa">
<span id="lrcbox">Loading ...</span> <!-- 歌词 -->
<canvas id="canv" width="1024" height="350"></canvas> <!-- 画布 -->
<span id="disc"></span><!-- 光盘 -->
<!-- 帖子外框结束 -->
</div>
<script>
let ctx = canv.getContext('2d'); //画笔样式设定
let w = canv.width, h = canv.height; //将画布HTML定义的尺寸赋值给变量 w 和 h 以方便后续操作
let num = (m, n) => Math.floor(Math.random() * (n - m + 1) + m); //工具函数：取两个数之间的随机整数
let stars = new Array(500), meteors = new Array(10); //创建两个数组：stars - 星星（500个），meteors - 流星（10个）
let aud = new Audio(); //创建音频
//lrc歌词数组
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'); //监听音频暂停状态：暂停时光盘不自转
//监听音频播放进度: 显示歌词
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr[j][0]) lrcbox.innerHTML = lrcAr[j][1];
}
});
//创建 Star 对象：绝大多数数据随机获取
function Star() {
this.x = num(3, w - 3); //初始X坐标
this.y = num(3, h -3); //初始Y坐标
this.r = num(1,3) * .5; //半径：星星大小将是此值的一倍
this.a = num(1, 10) * 0.1; //初始alpha值
this.speedA = 0.01; //alpha变化速度：用于星星闪烁
this.color = 'rgba(153, 204, 255, .6)'; //星星初始颜色
}
//Star 对象专属函数
Star.prototype = {
//创建星星函数
create: function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fill();
},
//星星闪烁函数
flash: function() {
this.a += this.speedA;
if(this.a > 1 || this.a < 0) this.speedA = -this.speedA;
this.color = 'rgba(153, 204, 255, ' + this.a + ')';
this.create();
},
//星星坠落函数
drop: function() {
this.x += 2;
this.y += 2;
this.a = .45;
if(this.x > w - 3 || this.y > h - 3) {
this.x = num(3, w - 3);
this.y = num(3, h -3);
}
},
};
//根据预设星星数组，将Star对象实例化并存储到数组中（原来声明的数组是空数组）
for(let x = 0; x < stars.length; x++) {
let star = new Star();
stars[x] = star;
}
//根据预设流星数组，随机取 stars 星星的 meteors.length 个做流星并将下标记录到 meterors 数组
for(let x = 0; x < meteors.length; x ++) meteors[x] = num(0,stars.length - 1);
//表达式渲染函数（页面加载时会自动执行一次）
(function render() {
ctx.globalCompositeOperation = 'destination-out'; //流星拖尾效果需要的属性
ctx.fillStyle = 'rgba(0,0,0,.1)'; //流星拖尾效果需要的设置：不完全透明填充色
ctx.fillRect(0,0,w,h);//流星拖尾效果需要的属性：覆盖画布（相当但不等于清空）
ctx.globalCompositeOperation = 'lighter';//流星拖尾效果需要的属性
for(let x of stars) x.flash(); //遍历 stars 对象、逐一运行flash函数
for(let x of meteors) stars[x].drop(); //遍历流星数组并逐一运行drop函数
requestAnimationFrame(render); //递归调用定时器：永动
})();
</script>
|
评分
-
| 参与人数 3 | 威望 +110 |
金钱 +220 |
经验 +110 |
收起
理由
|
 醉美水芙蓉
| + 30 |
+ 60 |
+ 30 |
赞一个! |
 加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2022-8-12 13:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-8-13 11:12
