孤鹰 歌手：艾米尔
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px;margin: 130px 0; left: calc(50% - 60px);width: clamp(600px, 80vw, 1440px); height: auto; aspect-ratio: 16/9;--bg: url('https://wj.zp68.com/lxx/yunhua/2025/09/23/48.jpg') no-repeat center/cover; --ma-size: 12%; }
#btnFs { right: 47%;bottom: 20px; color: #999; border-color: currentColor!important; }
#prog { position: absolute; left: 550px;top:50%; width: var(--ma-size); cursor: pointer; filter: hue-rotate(407deg) opacity(.6); }
#ma {left: 550px;top:28%;border-radius: 50%; }
#lrc {right: 10%;top: 100px; letter-spacing: 4px; writing-mode: vertical-rl; font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkKhaki;}
#lrc::before { width: 100%; height: 0; background: url('https://wj.zp68.com/lxx/yunhua/2025/08/18/bjs.jpg') center; background-clip: text;-webkit-background-clip: text; }
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
#dt2{ position: absolute; width:120px; height: 106px; top: 85px; left: 484px; }
.vid { mixed-blend-mode: screen; opacity: .30}
#msvg line { stroke-dasharray: 4 8; stroke-dashoffset: 100%; animation: move 2s linear infinite alternate var(--state); }
@keyframes move { to { stroke-dashoffset: 0; } }
</style>
<div id="pa">
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2025/09/23/a.png" alt="" />
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/fa04-audiofreehighqps/07/10/GKwRIaIMpyEIACAAAAQU8uwW.m4a" autoplay loop></audio>
<video class="vid pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669.mp4" autoplay loop muted></video>
<progress id="prog"></progress>
<div id="ma" class="opacity">
<svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci= [
['0.00', '孤鹰歌手：艾米尔',7.60],
['8.00', '帖赠：梦油',4.05],
['12.26', '词 曲：崔伟立',4.29],
['16.78', '编曲：牛渡',5.37],
['22.43', '伴唱：喜波',3.54],
['26.16', '混音：阿KEN',4.33],
['30.72', '制作人：崔伟立 ',3.33],
['34.23', '山间呼啸而过的风',3.20],
['37.60', '伴着漫天纷飞的雨',3.30],
['41.07', '头顶这片低垂的乌云',3.26],
['44.50', '禁锢我的双翼',3.36],
['48.04', '穿过浩瀚无垠天地',3.14],
['51.35', '越过苍茫雪山森林',3.18],
['54.70', '生来注定高飞的身影',3.25],
['58.12', '从来不信人间宿命',3.64],
['61.95', '一路飞啊飞',2.87],
['64.97', '刺破云层的缝隙',3.61],
['68.77', '一路追啊追',2.99],
['71.92', '熬过黑夜拥抱万丈光明',6.45],
['78.71', '我是一只孤独的鹰',3.32],
['82.20', '迎着暴雨逆风飞行',3.33],
['85.71', '翱翔晴空万里的天际',3.28],
['89.16', '那是我的意义',3.11],
['92.43', '我是一只倔强的鹰',3.32],
['95.93', '逐梦路上无畏艰辛',3.25],
['99.35', '来时一颗火热赤子心',3.23],
['102.75', '去时夜空最亮的星星',6.86],
['109.97', '歌词同步编辑：小辣椒',25.67],
['136.99', '山间呼啸而过的风',3.26],
['140.42', '伴着漫天纷飞的雨',3.28],
['143.87', '头顶这片低垂的乌云',3.37],
['147.42', '禁锢我的双翼',3.18],
['150.77', '穿过浩瀚无垠天地',3.30],
['154.24', '越过苍茫雪山森林',3.18],
['157.59', '生来注定高飞的身影',3.28],
['161.04', '从来不信人间宿命',3.62],
['164.85', '一路飞啊飞',2.86],
['167.86', '刺破云层的缝隙',3.58],
['171.63', '一路追啊追',2.86],
['174.64', '熬过黑夜拥抱万丈光明',6.55],
['181.53', '我是一只孤独的鹰',3.24],
['184.94', '迎着暴雨逆风飞行',3.35],
['188.47', '翱翔晴空万里的天际',3.25],
['191.89', '那是我的意义',3.31],
['195.37', '我是一只倔强的鹰',3.17],
['198.71', '逐梦路上无畏艰辛',3.28],
['202.16', '来时一颗火热赤子心',3.36],
['205.70', '去时夜空最亮的星星',7.14],
['213.22', '帖赠：梦油',12.44],
['226.31', '我是一只孤独的鹰',3.03],
['229.50', '迎着暴雨逆风飞行',3.45],
['233.13', '翱翔晴空万里的天际',3.19],
['236.49', '那是我的意义',3.30],
['239.96', '我是一只倔强的鹰',3.13],
['243.25', '逐梦路上无畏艰辛',3.30],
['246.72', '来时一颗火热赤子心',3.31],
['250.20', '去时夜空最亮的星星',7.83],
['258.44', '谢谢欣赏',4.71],
['263.40', '',4.5]
];
var dr = Dr.dr(msvg);
dr.circle(0, 0, 80, 'none', '#fff', 15).set('stroke-dasharray', '4 8');
var tt = 3;
Array.from({length: tt}).forEach((_,k) => {
dr.line(3, 0, 70, 0, '#eee', 15).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '4 2');
});
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
FS(pa, ma);
lrc(pa, geci);
</script> 继续同一首
{:5_128:}{:5_128:} {:5_150:}嘿嘿 还是这个音乐震撼 admin 发表于 2025-10-23 21:28
嘿嘿 还是这个音乐震撼
做了二个版本，前面发的是动图背景，现在发的是纯代码制作 {:5_150:}{:5_150:}{:5_150:} 我也是感觉音乐很震撼，{:5_150:}{:5_150:} 小辣椒这个纯代码制作的，前面那个是动图背景的
{:5_123:}{:5_123:} 欣赏小辣椒的《孤鹰》，点赞学习！ 了了子 发表于 2025-10-26 16:13
欣赏小辣椒的《孤鹰》，点赞学习！
谢谢老师欣赏，小辣椒学习黑黑老师代码制作的
页:
[1]