今天是端午节！（学习套用黑黑碧涧流泉效果）
<style>#mydiv { margin: 130px 0 30px calc(50% - 721px); width: 1280px; height:859px; background: url('https://xlaj.cn/assets/file/zp/20240610113940.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; user-select: none; position: relative; }
txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 40%; width: 60px; height: 60px;font: normal 30px sans-serif; color: snow; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }
txt-box::after { position: absolute; content: ''; inset: -4px; border: thick outset lightgreen; border-radius: 0 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 30px white); }
#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
@keyframes move { to { bottom: 150px; } }
@keyframes rot { to { transform: rotateX(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20240610114239.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241.mp4" muted loop autoplay></video>
</div>
<script>
(function() {
const ar = '祝花潮论坛的朋友们端午安康！'.split('');
const total = ar.length, half = Math.floor(ar.length / 2), ww = 980;
let tbAr = [];
ar.forEach((t,k) => {
let tbox = document.createElement('txt-box');
tbox.textContent = t;
tbox.style.cssText += `
--xx: ${ww / total * k + 180}px;
--delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
`;
tbAr.push(tbox);
mydiv.appendChild(tbox);
});
aud.onplaying = aud.onpause = () => {
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
aud.paused ? vid.pause() : vid.play();
tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
};
tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#mydiv',
lrcAr: lrcAr,
btn: '#mydiv',
lrc_css: 'left: 460px; top:80px; font:normal 2.4em 微软雅黑;--bg: LimeGreen; color: AliceBlue; ;',
});
};
mydiv.oncontextmenu = (e) => e.preventDefault();
const lrcAr= [
['0.00', ' 作词 : 太空小狮子',0.95],
['1.00', ' 作曲 : 太空小狮子',0.95],
['2.00', ' 编曲 : 太空小狮子',6.35],
['8.68', '制作人：张博伦',0.44],
['9.15', '作词：齐鲁铎',0.40],
['9.57', '作曲：齐鲁铎',0.38],
['9.97', '编曲：张博伦',0.40],
['10.39', '演唱：余静',0.39],
['10.90', '',0.44],
['11.26', '祝朋友们端午安康！',4.18],
['16.67', '五月初五端午节',4.63],
['20.54', '佩香囊 挂艾叶',3.35],
['24.06', '糯米粽子多吃些',3.67],
['27.93', '龙舟嘛争前列',3.56],
['31.67', '五月初 五端午节',3.08],
['34.91', '爱国心 楚辞写',4.10],
['39.23', '汨罗江边唤屈原',3.71],
['43.14', '纪念他忠贞烈',4.06],
['47.41', '祝端午安康！',13.88],
['62.02', '五月初五端午节',3.76],
['65.98', '佩香囊 挂艾叶',3.83],
['70.01', '糯米粽子多吃些',3.68],
['73.88', '龙舟嘛争前列',3.55],
['77.61', '五月初 五端午节',4.07],
['81.90', '爱国心 楚辞写',3.02],
['85.08', '汨罗江边唤屈原',4.21],
['89.52', '纪念他忠贞烈',4.5]
];
})();
</script> 谢谢黑黑源码分享，套一个@马黑黑 这么图片出来怎么慢，重新去上传 醉美水芙蓉 发表于 2024-6-10 11:37
欣赏小辣椒精彩单图！
问好水芙蓉，谢谢欣赏{:4_171:} 醉美水芙蓉 发表于 2024-6-10 11:37
祝大家端午安康！
同样的祝福送给你！端午安康！ 小辣椒朋友端午安康！ 梦油 发表于 2024-6-10 11:46
小辣椒朋友端午安康！
梦油好，同样的祝福送给你！
端午安康！幸福永远！ 这个帖子有浓浓的粽子香味 马黑黑 发表于 2024-6-10 12:13
这个帖子有浓浓的粽子香味
黑黑今天吃粽子没有？ 小辣椒 发表于 2024-6-10 12:16
黑黑今天吃粽子没有？
昨天就开始吃了{:4_173:} 马黑黑 发表于 2024-6-10 12:23
昨天就开始吃了
昨天我们才拿到粽子，今天吃了一个细沙粽{:4_173:} 挺漂亮的音画作品。 小辣椒 发表于 2024-6-10 12:29
昨天我们才拿到粽子，今天吃了一个细沙粽
味道好极了 小辣椒 发表于 2024-6-10 11:53
梦油好，同样的祝福送给你！
端午安康！幸福永远！
谢谢你，小辣椒朋友。{:5_108:} https://p4.itc.cn/q_70/images03/20210612/796524c78b654712af09305cdfbf0091.gif 小辣椒端午节开心安康！今天去看龙舟赛了吗{:4_187:} https://pic.imgdb.cn/item/6667fbf5d9c307b7e9b152ed.jpg 祝端午节安康！好漂亮啊！