夏日清晨 自摄照片 套用马老师代码制作
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; color: yellow; position:relative; overflow:hidden; }
.pa::before, .pa::after { position: absolute; content: ''; inset: 0; background: url('https://ff.xiaoqiaodali.top:5401/i/2026/08/04/6a71c83cecd4a.jpg') no-repeat center/cover; z-index: -2; }
.pa::before { background-position: var(--begin1) 0; }
.pa::after {
transform: scale(-1, 1);
background-position: var(--begin2) 0;
}
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#mpic { width: 160px; bottom: 50px; }
/* ==========新增歌词样式：底部居中单行========== */
.lyric-wrap{
position:absolute;
bottom:40px;
left:0;
width:100%;
text-align:center;
z-index:10;
pointer-events:none;
}
.lyric-text{
font-size:28px;
color:#ffffff;
text-shadow:1px 1px 3px #000000;
white-space:nowrap;
/* 修改部分：设置字体为隶书，并加粗 */
font-family: "LiShu", "隶书", serif;
font-weight: bold;
}
</style>
<div id="pa" class="pa">
<img id="mpic" class="rot" src="https://638183.freep.cn/638183/web/svg1/s002.svg" alt="" />
<video class="pd-vid" src="https://imgimg.qqdsw8.cn/view.php/c8aaf1dedd0e03d60ebccbaeb663bd39.mp4" autoplay loop muted></video>
<!-- 歌词DOM容器 -->
<div class="lyric-wrap">
<div class="lyric-text"></div>
</div>
</div>
<script>
var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;
var options = {
pa: '.pa',
urls: [['https://imgimg.qqdsw8.cn/view.php/afec70d28f29bb844f93d6bc3b8a5ee9.mp3']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
// ============这里粘贴你的LRC完整歌词文本============
const lrcText = `就让岁月开成一朵花
歌手: 阿云朵
发行日期:2026-04-16
词曲：吴忧
制作人：吴忧
放慢脚步 听一听耳边的风
半生光阴 轻的就像一场梦
不争不求 也不问人海匆匆
只想贪恋 此刻眼底的晴空
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
爱在时光中轻轻发芽
`;
// ==================================================
// LRC解析函数
function parseLrc(lrcStr){
const lines = lrcStr.split('\n');
const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/;
let list = [];
lines.forEach(line=>{
const m = line.match(reg);
if(!m) return;
const time = parseInt(m)*60 + parseInt(m) + parseInt(m)/1000;
const txt = line.replace(reg,'').trim();
if(txt) list.push({time,text:txt});
});
return list.sort((a,b)=>a.time-b.time);
}
function tzRun() {
var aud = new AudPlayer(options);
const lyricDom = document.querySelector('.lyric-text');
const lyricList = parseLrc(lrcText);
let lastIndex = -1;
// 歌词同步更新
function updateLyric(){
const cur = aud.aud.currentTime;
let idx = 0;
for(let i=0;i<lyricList.length;i++){
if(lyricList.time <= cur) idx = i;
}
if(idx!==lastIndex){
lyricDom.innerText = lyricList.text;
lastIndex = idx;
}
}
// 音频时间更新事件，驱动歌词切换
aud.aud.ontimeupdate = updateLyric;
function bgMove() {
var ww = aud.pa.offsetWidth;
function moving() {
cancelAnimationFrame(raf);
begin1 += speed;
if (speed > 0) {
if (begin1 >= ww) begin1 = -ww;
} else {
if(begin1 <= -ww) begin1 = ww;
}
begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : -1 * (begin1 + ww - 1);
aud.pa.style.setProperty('--begin1', begin1 + 'px');
aud.pa.style.setProperty('--begin2', begin2 + 'px');
aud.aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
}
moving();
}
aud.aud.onpause = () => bgMove();
aud.aud.onplaying = () => bgMove();
window.onresize = () => bgMove();
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 本帖最后由 霜染枫丹 于 2026-8-4 19:51 编辑
今天早上到明城墙遗址公园拍摄的向日葵
https://ff.xiaoqiaodali.top:5401/i/2026/08/04/6a71c83cecd4a.jpg
你的摄影水平十分了得啊！ 这个速度也太快了，自己拍照做黑黑老师的移动效果，很赞！欣赏学习了!{:4_199:} 梦油 发表于 2026-8-4 19:52
你的摄影水平十分了得啊！
欢迎梦老~·感谢您的支持鼓励，注意防暑，祝您夏安~~{:4_204:}{:4_190:}
梦江南 发表于 2026-8-4 19:56
这个速度也太快了，自己拍照做黑黑老师的移动效果，很赞！欣赏学习了!
梦江南晚上好~~今天早上我到明城墙遗址公园去看看葵花基本都开了，随拍了点花草。很感谢梦江南的支持鼓励，多注意防暑，恭祝夏安！！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-8-4 20:10
欢迎梦老~·感谢您的支持鼓励，注意防暑，祝您夏安~~
谢谢你的关心。{:5_108:} 好听好看，谢谢枫丹老师精彩分享{:4_204:} 杨帆 发表于 2026-8-4 21:18
好听好看，谢谢枫丹老师精彩分享
感谢扬帆的支持，天热外出受限，也只能线上玩了。您注意防暑，夏祺！{:4_204:}{:4_190:}
很漂亮的制作。看原图片，左侧的还好，右侧有一株向日葵拍到了一半，拼接起来有点怪，枫丹可以切掉一小段，再调整一下宽度相适应，就更好了{:4_187:} 很美丽的向日葵，欣赏枫丹好拍和好制作{:4_187:} 欣赏好拍摄好制作，点赞！ 梦油 发表于 2026-8-4 19:52
你的摄影水平十分了得啊！
感谢梦老的支持，晚上好！{:4_204:}{:4_190:}
红影 发表于 2026-8-4 22:14
很漂亮的制作。看原图片，左侧的还好，右侧有一株向日葵拍到了一半，拼接起来有点怪，枫丹可以切掉一小段， ...
红影晚上好~~感谢您的支持鼓励！没太在意背景，粗心了，{:4_173:}好像生怕别人看不出来是接缝似的。{:4_204:}{:4_190:}
魏淑芬 发表于 2026-8-5 12:49
欣赏好拍摄好制作，点赞！
魏淑芬晚上好~~
遗址公园再信号房那里种了一些向日葵，跑过去用手机拍了几幅。今年可能是天气不好，那些古槐树很少开花。感谢您的支持 ！夏安！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-8-5 19:29
感谢梦老的支持，晚上好！
枫丹朋友别客气。 霜染枫丹 发表于 2026-8-5 19:32
红影晚上好~~感谢您的支持鼓励！没太在意背景，粗心了，好像生怕别人看不出来是接缝似的。{:4_2 ...
其实只要稍微处理一下就会好很多{:4_173:}
页:
[1]