祈祷 - 罗广振 祝朋友们七夕快乐！（学习黑黑clamp设置16比9分辨率）
<style>#pa {
margin: 130px 0;
position: relative;
display: grid;
place-items: center;
left: calc(50% - var(--offsetX));
transform: translateX(-50%);
width: clamp(800px, 100vw, 1440px);
height: clamp(450px, 56.25vw, 810px);
box-sizing: border-box;
background: #ccc url('https://wj.zp68.com/lxx/yunhua/2025/08/28/61.jpg') no-repeat center/cover;
box-shadow: 4px 6px 8px rgba(0,0,0,.6);
--state: running;
--offsetX: 81px;
}
#ma {
position: absolute;
width: 20vw;
height: 20vw;
background: SlateBlue url('https://wj.zp68.com/lxx/yunhua/2025/08/28/bt1.png') no-repeat center/cover;
border-radius: 50%;
opacity: 0.5;
box-shadow: 0 0 16px rgba(0,0,0,.55);
transition: 1s;
cursor: pointer;
animation: rot 10s linear infinite var(--state);
}
#ma:hover { filter: invert(1); }
#msvg { position: absolute; pointer-events: none; }
#msvg rect { animation: move 18s var(--delay) linear infinite alternate var(--state), fade 1s var(--delay) linear infinite alternate var(--state); }
#btnFs { bottom: 20px; color: snow; }
#lrc {right: 10%;top: 100px; letter-spacing: 4px; writing-mode: vertical-rl; font:normal 2.2em 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%; } }
@keyframes rot {
to { transform: rotate(360deg); }
}
@keyframes move {
to { x : 0; y: 0; }
}
@keyframes fade {
to { opacity: 0; }
}
</style>
<div id="pa">
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2025/08/28/01.mp3" autoplay loop></audio>
<div id="ma"></div>
<svg id="msvg" width="100%" height="100%" viewBox="-80 -45 160 90"></svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.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', '* 祈祷 *',5.48],
['6.82', '歌手：罗广振',2.64],
['9.60', '作词：梁芷珊',3.19],
['12.96', '惩罚我这半生不快乐',5.79],
['20.11', '活着却消失感觉',5.76],
['27.23', '惩罚我每天都牵挂',5.94],
['34.54', '为着你暗暗泪下',5.97],
['41.88', '惩罚我深宵中不追梦',6.49],
['48.71', '独自叹息心痛',6.85],
['55.92', '惩罚我到这天总失去',6.75],
['63.02', '旧事变了负累',6.84],
['70.22', '原谅我说过的不兑现',6.70],
['77.27', '实在有太多苦衷',6.85],
['84.48', '原谅我不懂得珍惜你',6.75],
['91.59', '令热爱变了没趣味',7.01],
['98.97', '原谅我当天一些错误',6.72],
['106.04', '但别置我于不顾',6.82],
['113.22', '求让我再献出心中爱',6.69],
['120.26', '为着你永远等待',6.83],
['127.45', '歌词同步编辑：小辣椒',2.45],
['130.03', '多谢',2.66],
['132.83', '祝福朋友们七夕快乐',20.99],
['154.93', '',4.5]
];
lrc(pa, geci)
var dr = Dr.dr(msvg);
var lzCount = 120;
Array.from({length: lzCount}).forEach((_,idx) => {
var x = Math.random() * 80 * (Math.random() > 0.5 ? 1 : -1),
y = Math.random() * 45 * (Math.random() > 0.5 ? 1 : -1),
s = Math.random() + 1,
d = Math.random() * -18,
c = '#' + Math.random().toString(16).substring(2,8);
dr.rect(x,y,s,s,c,'none',0,'50%','50%').style(`--delay: ${d}s`);
});
FS(pa, ma);
</script> 都忘记明天是七夕，晚上上论坛才知道，赶快做一个黑黑的代码作业，祝朋友们七夕快乐！ 感谢黑黑源码分享，直接套用玩一个，赶时间我把歌曲截短了一点{:4_170:}
@马黑黑 今天有点迟了，来不及回帖了，先下了 漂亮 漂亮！谢谢小辣椒精彩分享{:4_204:} 音画唯美 粤语版好听。 下次也翻唱一版 你打歌词错了，是多谢（不是道歉） 哇，小辣椒辛苦了，这么晚还做帖发帖。要多多注意休息哦！{:4_187:} 漂亮，欣赏小辣椒的精彩音画分享。{:4_171:} 共祝七夕节快乐！{:4_204:} 粤语版的祈祷第一次听， 真好听呢！{:4_187:} 特效动画与歌曲结合完美无瑕{:4_204:}欣赏小辣椒佳作~ 感受这暖暖的祝福{:4_204:}祈祷所有朋友们吉祥安康！七夕快乐！ 画面很温暖，如此美妙的七夕祝福帖子。
欣赏亲爱的好帖，借帖祝大家七夕节快乐{:4_199:} 马黑黑 发表于 2025-8-28 23:25
漂亮
黑黑喝茶{:4_180:} 杨帆 发表于 2025-8-28 23:57
漂亮！谢谢小辣椒精彩分享
问好杨帆谢谢欣赏{:4_187:} 偶然~ 发表于 2025-8-29 00:01
音画唯美
问好偶然谢谢欣赏{:4_187:}
页:
[1]
2