淡墨疏影 发表于 2026-6-19 11:28

端午安康


<style type="text/css">
:root   {--w:394px; /* 单张图片宽度 */ --h:700px; /* 单张图片高度 */}   
#outframe {
    width:var(--w);
    height:var(--h);
    margin:160px auto;
    overflow:hidden;
    border-radius:32px;
    position:relative;
}
/* 一共6张图，总宽度 = 6 * 单图宽 */
#pichold {
    width:calc(6 * var(--w));
    height:var(--h);
    display:flex; /* 替换float，彻底消除图片错位拼图 */
    animation: pshift 48s linear infinite alternate; /* 匀速运动，总时长48秒 */
}
#pichold img {
    width:var(--w);
    height:var(--h);
    flex-shrink:0; /* 禁止图片压缩变形 */
    object-fit:cover; /* 图片填满框，不变形留白 */
}

/* 歌词字幕样式 */
.lyric-box{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 25px 0;
    background: linear-gradient(transparent,rgba(0,0,0,0.5));
    text-align: center;
    pointer-events: none;
    z-index: 99;
}
.lyric-text{
    color: #f8f8f8;
    font-size: 20px;
    line-height: 2.4;
    letter-spacing: 3px;
    text-shadow: 1px 2px 4px #000;
    transition: all 0.4s ease;
}
.lyric-cur{
    color: #ffedaa;
    font-size: 23px;
    font-weight: 500;
}

/* LOGO 样式 */
.logo {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 140px;
    height: auto;
    z-index: 98;
    opacity: 0.95;
    border-radius: 8px;
}

/* 动画：针对6张图片 */
@keyframes pshift {
    0%, 4% { transform: translateX(0px); }         /* 第1张 */
    12%, 16% { transform: translateX(calc(-1 * var(--w))); } /* 第2张 */
    24%, 28% { transform: translateX(calc(-2 * var(--w))); } /* 第3张 */
    36%, 40% { transform: translateX(calc(-3 * var(--w))); } /* 第4张 */
    48%, 52% { transform: translateX(calc(-4 * var(--w))); } /* 第5张 */
    60%, 64% { transform: translateX(calc(-5 * var(--w))); } /* 第6张 */
    72%, 76% { transform: translateX(calc(-4 * var(--w))); } /* 第5张 */
    84%, 88% { transform: translateX(calc(-3 * var(--w))); } /* 第4张 */
    96%, 100% { transform: translateX(calc(-2 * var(--w))); } /* 第3张 */
}
</style>
<div id="outframe">
    <div id="pichold">
      <img src="https://pic1.imgdb.cn/item/6a34ad8291b65c4475afa87c.jpg">
      <img src="https://pic1.imgdb.cn/item/6a34adb791b65c4475afa8ae.jpg">
      <img src="https://pic1.imgdb.cn/item/6a34adb991b65c4475afa8b2.jpg">
      <img src="https://pic1.imgdb.cn/item/6a34adb791b65c4475afa8af.jpg">
      <img src="https://pic1.imgdb.cn/item/6a34adb791b65c4475afa8ad.jpg">
      <img src="https://pic1.imgdb.cn/item/6a34adb591b65c4475afa8aa.jpg">
    </div>

    <!-- 歌词层 -->
    <div class="lyric-box">
      <div class="lyric-text" id="lyricContent"></div>
    </div>
</div>

<!-- 音频 -->
<audio id="music" autoplay loop src="https://imgimg.qqdsw8.cn/view.php/83b1b767b83ba46e87313c8c36f288cc.mp3"></audio>

<script>
//一念花开 LRC
const lrc = `
五月初过端阳
梅子熟来杏子黄
粽子飘香配香囊
艾叶高挂福满堂
哎，，，，，，
盼君好念君康
愿君岁岁福长往
家家兴业业旺
幸福快乐万年长
哎，，，，，，
`;

// 解析LRC
function parseLrc(lrcStr){
    let list = [];
    let reg = /\[(\d{2}):(\d{2})\.(\d{2})\](.+)/;
    lrcStr.split('\n').forEach(line=>{
      let res = line.match(reg);
      if(res){
            let m = parseInt(res);
            let s = parseInt(res);
            let ms = parseInt(res);
            let time = m*60 + s + ms/100;
            list.push({time,text:res});
      }
    });
    return list.sort((a,b)=>a.time-b.time);
}

const lyricList = parseLrc(lrc);
const lyricDom = document.getElementById('lyricContent');
const music = document.getElementById('music');
let curIndex = 0;

// 跟着音乐时间滚动歌词
function syncLyric(){
    let nowTime = music.currentTime;
    for(let i=0; i<lyricList.length; i++){
      if(nowTime >= lyricList.time){
            curIndex = i;
      }
    }
    lyricDom.innerText = lyricList.text;
    lyricDom.className = "lyric-text lyric-cur";
}

setInterval(syncLyric, 100);
</script>

淡墨疏影 发表于 2026-6-19 11:29

祝各位老师端午节快乐！

梦江南 发表于 2026-6-19 12:02

帖子里的歌曲是老师在唱吗？

梦江南 发表于 2026-6-19 12:03

欣赏老师佳作，端午安康！{:4_187:}

淡墨疏影 发表于 2026-6-19 12:48

梦江南 发表于 2026-6-19 12:02
帖子里的歌曲是老师在唱吗？

不是，是在网络上下载的，上面没有标注演唱人，

淡墨疏影 发表于 2026-6-19 12:49

梦江南 发表于 2026-6-19 12:03
欣赏老师佳作，端午安康！

谢谢！端午安康，阖家吉祥

梦油 发表于 2026-6-19 15:17

好曲配好词，谢谢淡漠疏影朋友，祝你端午安康、万事皆顺。

红影 发表于 2026-6-19 16:24

很漂亮的端午特色帖子，欣赏淡墨疏影好帖，端午安康{:4_187:}

淡墨疏影 发表于 2026-6-19 20:25

梦油 发表于 2026-6-19 15:17
好曲配好词，谢谢淡漠疏影朋友，祝你端午安康、万事皆顺。

谢谢！祝端午安康，晚上好。

淡墨疏影 发表于 2026-6-19 20:26

红影 发表于 2026-6-19 16:24
很漂亮的端午特色帖子，欣赏淡墨疏影好帖，端午安康

谢谢！来到这里正值端午，衷心祝各位老师端午安康。

梦油 发表于 2026-6-20 16:51

淡墨疏影 发表于 2026-6-19 20:25
谢谢！祝端午安康，晚上好。

淡墨疏影朋友别客气。

红影 发表于 2026-6-20 22:07

淡墨疏影 发表于 2026-6-19 20:26
谢谢！来到这里正值端午，衷心祝各位老师端午安康。

是啊，巧了，正逢节日呢，真不错{:4_204:}
页: [1]
查看完整版本: 端午安康