|
|

楼主 |
发表于 2022-8-8 06:59
|
显示全部楼层
源码分享:
- <style>
- #papa { margin: auto; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
- #canv { position: absolute; width: 100%; height: 100%; background: #000; }
- #bgImg { display: none; }
- #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; }
- #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="canv"></canvas>
- <img id="bgImg" src="https://638183.freep.cn/638183/Pic/81/fanhuameng.jpg" alt="" />
- <span id="disc"></span>
- <span id="tit">繁华梦 | 琵琶·朱飞霏</span>
- </div>
- <script>
- let ctx = canv.getContext('2d');
- let w = papa.clientWidth, h = papa.clientHeight, aud = new Audio();
- let dotAr = Array.from({length: 200}, (item,key) => { return { x: Math.random()*w, y: Math.random()*h, r: Math.random()*5, }; });
- canv.width = w;
- canv.height = h;
- aud.src = 'https://music.163.com/song/media/outer/url?id=1466888290.mp3';
- aud.loop = true;
- aud.autoplay = true;
- 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 draw() {
- ctx.clearRect(0,0,w,h);
- ctx.drawImage(bgImg, 0, 0, w, h);
- ctx.beginPath();
- for(item of dotAr) {
- ctx.fillStyle = 'rgba(255,255,255,.35)';
- ctx.moveTo(item.x, item.y);
- ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2);
- }
- ctx.fill();
- update();
- }
- function update() {
- for (key in dotAr) {
- dotAr[key].y -= (7 - dotAr[key].r) / 10;
- if(dotAr[key].y < 0) {
- dotAr[key] = {
- x: Math.random() * w,
- y: h,
- r: Math.random()*5,
- }
- }
- }
- }
- draw();
- setInterval(draw,10);
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|