队长做得漂亮啊
本帖最后由 加林森 于 2022-8-8 15:35 编辑 <br /><br />绿叶清舟 发表于 2022-6-12 20:30
队长做得漂亮啊
谢谢清舟。{:4_190:}
<style>
#papa { left: -214px; 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://s1.ax1x.com/2022/08/08/vMxQ3t.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=1477837031.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.y -= (7 - dotAr.r) / 10;
if(dotAr.y < 0) {
dotAr = {
x: Math.random() * w,
y: h,
r: Math.random()*5,
}
}
}
}
draw();
setInterval(draw,10);
</script>
醉美水芙蓉 发表于 2022-6-12 20:37
欣赏队长佳作！
水芙蓉晚上好！谢谢！{:4_190:}
马黑黑 发表于 2022-6-12 20:07
没路费
还是没钱啊。{:4_189:}
加林森 发表于 2022-6-12 20:40
谢谢清舟。
队长客气了{:4_176:}换个颜色的
绿叶清舟 发表于 2022-6-12 20:55
队长客气了换个颜色的
好的好的。{:4_176:}干杯！
加林森 发表于 2022-6-12 18:23
@马黑黑 @小辣椒
来了，我在听
队长进步不少了{:4_178:}
小辣椒 发表于 2022-6-12 21:28
来了，我在听
有点毛病的。{:5_102:}
加林森 发表于 2022-6-12 20:43
还是没钱啊。
跑到过去路程远，花费多
队长这个比前面2个歌词同步好不少了，还是有几句没有同步，队长继续加油！
小辣椒 发表于 2022-6-12 21:30
队长进步不少了
这几天养老院也搞得我手忙脚乱的。回来就学习制作这个帖，结果还是有点毛病的。
马黑黑 发表于 2022-6-12 21:30
跑到过去路程远，花费多
骑着的猪飞越过去就不怕了嘛。{:5_117:}
加林森 发表于 2022-6-12 21:33
骑着的猪飞越过去就不怕了嘛。
那是东篱赋予你的专利
马黑黑 发表于 2022-6-12 21:35
那是东篱赋予你的专利
你是猪倌得嘛。。。。{:5_106:}
小辣椒 发表于 2022-6-12 21:31
队长这个比前面2个歌词同步好不少了，还是有几句没有同步，队长继续加油！
是的。明天来制作一个草原歌曲。我熟悉的歌曲。
加林森 发表于 2022-6-12 21:32
这几天养老院也搞得我手忙脚乱的。回来就学习制作这个帖，结果还是有点毛病的。
慢慢来，这个就是要熟息的歌曲会快一点。今天我发的那首其实做同步也是很难的，主要我自己会唱，方便一点
加林森 发表于 2022-6-12 21:41
是的。明天来制作一个草原歌曲。我熟悉的歌曲。
队长，每天开始我会少玩了。。。。你开心玩
小辣椒 发表于 2022-6-12 21:43
慢慢来，这个就是要熟息的歌曲会快一点。今天我发的那首其实做同步也是很难的，主要我自己会唱，方便一点
嗯嗯。明白的。