- <style>
- #papa { left: 214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
- #canvas { position: absolute; top: 0; left: 0; }
- #disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 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; }
- #imgSnow, #bgSnow { display: none; }
- #tit { position: absolute; left: 60px; top: 10px; font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="papa">
- <canvas id="canvas"></canvas>
- <img id="imgSnow" src="https://www.huachaowang.com/data/attachment/forum/202209/16/123530ufhtrajxku4kzde9.png" alt="">
- <img id="bgSnow" src="https://pic.imgdb.cn/item/63286f0716f2c2beb1d69caa.jpg" alt="">
- <span id="disc"></span>
- <span id="tit">片片枫叶情</span>
- </div>
- <script>
- <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;
- let num = (m, n) => Math.floor(Math.random() * (n - m + 1) + m);
- let stars = new Array(500), meteors = new Array(10);
- let aud = new Audio();
- let lrcAr = [
- ['0.03','张智霖、许秋怡 - 片片枫叶情'],
- ['1.01','作词:潘伟源'],
- ['1.03','作曲:邓文杰'],
- ['16.03','LRC编辑:醉美水芙蓉'],
- ['19.10','女:'],
- ['22.04','片片红叶转'],
- ['26.06','它低叹再会了这段缘'],
- ['32.02','片片红叶转'],
- ['36.05','回头望告别了苦恋'],
- ['42.00','爱似秋枫叶'],
- ['46.03','无力再灿烂再燃'],
- ['51.07','爱似秋枫叶'],
- ['56.01','凝聚了美丽却苦短'],
- ['60.00','男:'],
- ['61.09','片片红叶转'],
- ['65.09','它低叹再会了这段缘'],
- ['71.04','片片红叶转'],
- ['75.06','回头望告别了苦恋'],
- ['81.02','爱似秋枫叶'],
- ['85.05','无力再灿烂再燃'],
- ['91.00','爱似秋枫叶'],
- ['95.03','凝聚了美丽却苦短'],
- ['99.05','女:'],
- ['103.05','片片叶儿随梦却倾刻飘远'],
- ['108.02','相看对泣竟默然'],
- ['113.00','片片叶儿携着我此生所爱'],
- ['117.10','一飘再飘梦更远'],
- ['123.05','男:'],
- ['123.06','远远夕阳陪着你此刻归去'],
- ['127.07','心中爱火怎复燃'],
- ['132.07','远远夕阳携着我此生所爱'],
- ['137.06','秋风带走梦片片'],
- ['142.10','女:'],
- ['162.01','片片红叶转'],
- ['166.03','它低叹再会了这段缘'],
- ['171.08','片片红叶转'],
- ['176.02','回头望告别了苦恋'],
- ['179.10','男:'],
- ['181.06','爱似秋枫叶'],
- ['186.00','无力再灿烂再燃'],
- ['191.05','爱似秋枫叶'],
- ['195.08','凝聚了美丽却苦短'],
- ['200.02','女:'],
- ['203.10','片片叶儿随梦却倾刻飘远'],
- ['208.06','相看对泣竟默然'],
- ['213.05','片片叶儿携着我此生所爱'],
- ['218.04','一飘再飘梦更远'],
- ['223.07','男:'],
- ['223.09','远远夕阳陪着你此刻归去'],
- ['228.02','心中爱火怎复燃'],
- ['233.01','远远夕阳携着我此生所爱'],
- ['238.00','秋风带走梦片片'],
- ['243.04','女:'],
- ['243.06','片片叶儿随梦却倾刻飘远'],
- ['247.09','相看对泣竟默然'],
- ['252.06','片片叶儿携着我此生所爱'],
- ['257.07','一飘再飘梦更远'],
- ['262.10','男:'],
- ['263.02','远远夕阳陪着你此刻归去'],
- ['267.05','心中爱火怎复燃'],
- ['272.04','远远夕阳携着我此生所爱'],
- ['277.06','谢谢欣赏!']
- ];
- aud.loop = true;
- aud.autoplay = true;
- aud.src = 'https://www.qqmc.com/up/kwlink.php?id=56250&.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');
- (function () {
- let ctx = canvas.getContext('2d');
- let snowArray = {}; //雪花对象
- let snowIndex = 0; //标识符
- let setting = {
- num: 30, //数量
- snowSize: 20, //大小
- startX: Math.random() * canvas.width, //起始横坐标
- startY: 0, //起始纵坐标
- vy: 0.01
- }
- canvas.width = papa.offsetWidth;
- canvas.height = papa.offsetHeight;
-
- function snow() {
- this.x = Math.random() * canvas.width; // 起始横坐标
- this.y = setting.startY; // 起始纵坐标
- this.size = setting.snowSize + Math.random() * 10 - 10; //大小
- this.vx = Math.random() * 3 - 2; //横坐标偏移量
- this.vy = Math.random() * 10; //纵坐标偏移量
- this.life = 0;
- this.maxLife = 100;
- this.id = snowIndex;
- snowArray[snowIndex] = this; //当前信息保存至对象snowArray
- snowIndex ++;
- }
- snow.prototype.draw = function () {
- this.x += this.vx;
- this.y += this.vy;
- this.vy += setting.vy;
- this.life ++;
- if (this.y > canvas.height * 0.9 - 20 || this.life >= this.maxLife) snowArray[this.id];
- ctx.drawImage(imgSnow, this.x, this.y, this.size, this.size)
- }
- function render() {
- ctx.drawImage(bgSnow, 0, 0, canvas.width, canvas.height);
- for (let j = 0; j < setting.num; j++) {
- if (Math.random() > 0.97) new snow();
- }
- for (let j in snowArray) {
- snowArray[j].draw();
- }
- requestAnimationFrame(render);
- }
- render();
- })();
- </script>
复制代码 |