纸上雪 （学习老黑“ HIGH歌”制作）
本帖最后由 加林森 于 2022-9-5 18:02 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: #666 url('https://pic.imgdb.cn/item/6315b9f416f2c2beb1682410.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute; padding: 0; margin: 20px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#prog, #track { stroke: url(#gradient); }
#lrc { position: absolute; display: block; left: 20px; bottom: 0; }
#lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2em sans-serif; text-shadow: 0 4px 0 #000; letter-spacing: 2px; }
#disc { position: absolute; width: 60px; height: 60px; left: 110px; top: 600px; 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; }
</style>
<div id="papa">
<div id="mplayer">
<svg width="100%" height="100%" shape-rendering="geometricPrecision">
<g transform="rotate(-90, 60, 60)">
<circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.45" />
<circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="red" stroke-width="10" />
</g>
<text fill="orange">
<tspan id="cur" x="40" y="55">00:00</tspan>
<tspan id="dur" x="40" y="75">00:00</tspan>
</text>
</svg>
</div>
<svg id="lrc" width="400" height="50">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="green"/>
<stop offset="50%" stop-color="orange"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<text id="lrctxt" x="0" y="25">纸上雪 - 许嵩</text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','纸上雪- 许嵩'],
['28.12','墙影晃烛我提笔却清楚'],
['32.86','宣白上行书蘸墨了几行路'],
['38.14','暗夜风惊竹谁在窗外起舞'],
['43.28','而冷风隔窗我静静地读'],
['51.19','炊烟不安袅袅了几道弯'],
['56.33','俗事万般不敌雪落轻叹'],
['61.12','眼前雪满山咫尺纷飞不断'],
['66.86','门开不远处与天地对谈'],
['75.91','雪霁一壶酒与你共饮春秋'],
['81.15','盼前尘回首三生亦师友'],
['86.53','千年画卷不寂寞不沉默'],
['92.17','江岸垂钓的是洒脱'],
['96.35','雪霁一壶酒与你共饮春秋'],
['101.47','天涯话不多浮生继续走'],
['106.92','青史无载不犯愁不落寞'],
['113.43','话桑麻谁开口唯挚友'],
['132.78','洒空谁落定巷深人寂静'],
['137.82','群山皑皑谁来命名'],
['142.72','积素雪如琴音落不停'],
['148.41','广庭闲不语却动听'],
['154.61','雪霁一壶酒与你共饮春秋'],
['162.81','盼前尘回首三生亦师友'],
['168.29','千年画卷不寂寞不沉默'],
['171.91','江岸垂钓的是洒脱'],
['178.17','雪霁一壶酒与你共饮春秋'],
['183.16','天涯话不多浮生继续走'],
['188.59','青史无载不犯愁不落寞'],
['195.08','话桑麻谁开口'],
['198.82','雪霁一壶酒与你共饮春秋'],
['203.76','盼前尘回首三生亦师友'],
['208.90','千年画卷不寂寞不沉默'],
['214.79','江岸垂钓的是洒脱'],
['218.97','雪霁一壶酒与你共饮春秋'],
['224.21','天涯话不多浮生继续走'],
['229.44','青史无载不犯愁不落寞'],
['235.86','话桑麻谁开口唯挚'],
['242.00','谢谢欣赏']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1978137630.mp3';
aud.autoplay = true;
aud.loop = true;
//设置圆环进度偏移
let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
//圆环鼠标经过
mplayer.onmousemove = (e) => {
if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}
//圆环点击
mplayer.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) { //轨道
let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
deg += (e.offsetX < 60 && e.offsetY < 60) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
} else { //内区域
aud.paused ? aud.play() : aud.pause();
}
}
//监听播放进度
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
cur.textContent = toMin(aud.currentTime);
dur.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
//圆检测鼠标经过
let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);
//时间信息格式化
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
@马黑黑 好美的雪景。 梦油 发表于 2022-9-5 17:58
好美的雪景。
老梦速度好快！ 加林森 发表于 2022-9-5 18:02
老梦速度好快！
抢个沙发啊。 梦油 发表于 2022-9-5 18:18
抢个沙发啊。
好的好的。 欣赏队长大作 醉美水芙蓉 发表于 2022-9-5 18:48
队长要是把黑黑老师的下雪特效加进去就更漂亮了！@马黑黑 可以加吧?
完全可以 队长真快，欣赏队长漂亮的制作{:4_187:} 欣赏老师的精彩分享，问好！{:4_187:} 梦缘 发表于 2022-9-5 20:01
欣赏老师的精彩分享，问好！
谢谢梦缘！{:4_190:} 马黑黑 发表于 2022-9-5 18:45
欣赏队长大作
谢谢老黑！{:4_191:} 醉美水芙蓉 发表于 2022-9-5 18:48
队长要是把黑黑老师的下雪特效加进去就更漂亮了！@马黑黑 可以加吧?
是的。你这个建议挺好的。 红影 发表于 2022-9-5 19:20
队长真快，欣赏队长漂亮的制作
谢谢啦。 加林森 发表于 2022-9-5 20:05
谢谢老黑！
不客气的 马黑黑 发表于 2022-9-5 20:08
不客气的
嗯嗯，今天忙了一天，都是疫情引来的麻烦。 队长已经做好了，我才看了黑黑的教程，今天又来不及做了 小辣椒 发表于 2022-9-5 20:41
队长已经做好了，我才看了黑黑的教程，今天又来不及做了
我也是今天下午回来才制作的。 加林森 发表于 2022-9-5 20:20
嗯嗯，今天忙了一天，都是疫情引来的麻烦。
理解
页:
[1]
2