眼泪打湿尼古丁 帖赠小风
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px;margin: 130px 0 40px calc(50% - 380px); --bg: tan url('https://upfile.mp3.wf/view.php/a255a585d751ba5c6368d518d8177943.jpg') no-repeat center/cover; }
#progress { position: absolute;left: 44%; bottom: 32%; width: 8vw; height: 8vw; transition: .4s; }
#prog, #track { fill: none; stroke: url(#grd1); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke: snow; }
#g1 { animation: unset; cursor: pointer; }
#btnFs {left: 10%;bottom: 20px; color: snow; border-color: currentColor!important; }
.circle { transform-box: fill-box; transform-origin: center; fill: transparent; stroke: url(#grd1); stroke-width: 10; stroke-opacity: .7; animation: rot var(--duration) linear infinite var(--state); }
@keyframes rot { to { transform: rotate(-360deg); } }
#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 37%; bottom: 50px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkCyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
</style>
<div id="pa">
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/9d2f-audiofreehighqps/06/17/GKwRIRwM0BjkACAAAAQoY5O4.m4a" autoplay loop></audio>
<video class="pd-vid" src="https://upfile.mp3.wf/view.php/e180ec2f83c50d2476555813e1b6a9af.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="sepia"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
['0.00', '眼泪打湿尼古丁',9.55],
['10.05', '作词：余有所悸',5.65],
['16.00', '作曲：苏二墨',5.13],
['21.40', '夜晚的冷风 吹的我的心好冷',4.59],
['26.23', '我的思念那么那么浓',4.66],
['31.14', '在你的眼中 爱已经成空',4.55],
['35.93', '我的心里如此如此的疼',4.79],
['40.97', '房间里的灯 和我孤单的身影',4.56],
['45.77', '回忆在脑海里悄然翻涌',4.74],
['50.76', '酒杯里藏着 多少的苦衷',4.56],
['55.56', '心被伤透已经千疮百孔',4.68],
['60.49', '当我的眼泪打湿了尼古丁',4.65],
['65.38', '发誓你的情话永远不再听',4.58],
['70.20', '当爱上你是场醒不来的梦',4.64],
['75.08', '梦中也见不到你的影踪',4.64],
['79.96', '当我的眼泪打湿了尼古丁',4.75],
['84.96', '曾经的诺言已结成冰',4.61],
['89.81', '无数夜里泪水多么的汹涌',4.73],
['94.79', '只剩下孤独陪我到天明',4.62],
['99.65', '只剩下孤独陪我到天明',4.70],
['104.60', 'LRC编辑：小辣椒',18.64],
['124.22', '房间里的灯 和我孤单的身影',4.65],
['129.11', '回忆在脑海里悄然翻涌',4.57],
['133.92', '酒杯里藏着 多少的苦衷',4.62],
['138.78', '心被伤透已经千疮百孔',4.66],
['143.69', '当我的眼泪打湿了尼古丁',4.74],
['148.68', '发誓你的情话永远不再听',4.65],
['153.58', '当爱上你是场醒不来的梦',4.59],
['158.41', '梦中也见不到你的影踪',4.71],
['163.37', '当我的眼泪打湿了尼古丁',4.58],
['168.19', '曾经的诺言已结成冰',4.67],
['173.11', '无数夜里泪水多么的汹涌',4.62],
['177.97', '只剩下孤独陪我到天明',4.70],
['182.92', '只剩下孤独陪我到天明',4.66],
['187.82', '当我的眼泪打湿了尼古丁',4.66],
['192.73', '曾经的诺言已结成冰',4.66],
['197.63', '无数夜里泪水多么的汹涌',4.66],
['202.53', '只剩下孤独陪我到天明',4.46],
['207.23', '只剩下孤独陪我到天明',4.76],
['212.24', '谢谢欣赏',6.26],
['232.51', '',4.5]
];
lrc(pa, geci);
var dr = Dr.dr(progress);
var rs = [{cx: -100, cy: -100}, {cx: 0,cy: 0}, {cx: 100, cy: -100}];
var grdSet = {id: 'grd1', x1: 0, x2: 0, y1: 0, y2: 1};
var stopAr = [['red',0], ['green',.5], ['orange',1]];
dr.gradient('linearGradient', grdSet, stopAr);
rs.forEach((r,k) => {
var du = ((Math.random() * 20 + 20) / 10).toFixed(2);
dr.circle(r.cx, r.cy, 90).sets({class: 'circle', style: `--duration: ${du}s`}).addTo(g1);
});
dr.path('M-190 0 Q0 300,190 0').id('track').addTo(g2);
dr.path('M-190 0 Q0 300,190 0').id('prog').addTo(g2);
FS(pa, g1);
</script>
@马黑黑
黑黑早就下载了Kalos Eidos的代码，一直没有完成这个专业，今天才完成 @风中飞尘
小风你说喜欢这首歌，就用你的无损音乐做了这个作业，暂时别删无损音乐，先欣赏几天{:4_170:} 帖子味道足，挺不错 这个制作太漂亮了，标题字很特别，频谱和小播都很漂亮。
欣赏亲爱的好帖{:4_199:} 这歌曲名很奇特，还是第一次听这歌呢{:4_187:} 谢谢小辣椒，，好久没来花潮，，还是一如既往，无边热爱，万般深意，，，非常好听的歌，，辛苦你了，， 本帖最后由 梦江南 于 2025-10-24 07:48 编辑
这背景图图实在是太漂亮了，好好喜欢！{:4_187:} 小辣椒辛苦了！保重哦！{:5_150:} 标题的字和下面的字幕都有新意。{:5_116:} 音质特别好
{:4_178:}
页:
[1]