论坛 › 欢乐水吧 › 【花潮贺岁】不再流泪 不再喝醉 歌手：郭力

小辣椒 发表于 2026-2-13 21:26

【花潮贺岁】不再流泪 不再喝醉 歌手：郭力

<style>
#papa {
      --state: paused;
      margin: 140px 0 0 calc(50% - 761px);
      width: 1400px;
      height: 780px;
      background: lightgreen url('https://wj.zp68.com/lxx/yunhua/2026/02/26/00.jpg') center/cover no-repeat;
      box-shadow: 3px 3px 20px #000;
      display: grid;
      place-items: center;
      position: relative;
}
#lrc {
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(180deg, hsla(120, 70%, 50%, .75), hsla(120, 70%, 50%, .75));
      position: absolute;
      top: 520px;
         left: 780px;
      font: bold 2.4em sans-serif;
      color: snow;
      white-space: pre;
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 1px hsla(0, 0%, 0%, .95));
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      filter: inherit;
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}

#face {
      position: absolute;
      left: 85%;
      top: 78%;
      width: 110px;
      height: 93px;
      border: 1px solid #;
      border-radius: 100% 100% 80% 80%;
      cursor: pointer;
}

#face > span {
      position: absolute;
      top: 39px;
      width: 10px;
      height: 16px;
      border-radius: 50%;
      background: #000;
}
#face > span:nth-of-type(1) {
      left: 25px;
      animation: mov .5s infinitealternate var(--state);
      --xx: 10px;
}
#face > span:nth-of-type(2) {
      left: 70px;
      animation: mov .5s infinite linear alternate var(--state);
      --xx: -10px;
}
#face > span:nth-of-type(3) {
      height: 8px;
      background: none;
      border: 1px solid #000;
      top: 68px;
      left: 45px;
      transform: scale(.5);
      animation: scale .15s infinite alternate var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes mov {to { transform: translate(var(--xx)); } }
@keyframes scale { to {transform: scale(1.5); } }

#dt2{ position: absolute; width: 200px; height: 113px; top: 160px; left: 775px; }
</style>

<div id="papa">

<img id="dt2" src="
https://wj.zp68.com/lxx//yunhua/2023/03/17/btf.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 40px) rotate(360deg); " />

      <audio id="aud" src="https://wj.zp68.com/lxx//yunhua/2023/03/17/bzll.mp3" loop autoplay></audio>
      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <div id="face">
                <span></span>
                <span></span>
                <span></span>
</div>
</div>

<script>

let averAdd = 0, offset = 0, mKey = 0, mFlag = true;

let lrcTime = (ar) => {let tmpAr = [];for (j = 0; j < ar.length - 1; j++) {if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item, key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for (x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re, '');if (geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');let time = x.match(re);if (time != null) {for (y of time) {let tmp = y.match(/\d+/g);let sec = 0;for (z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar);}}}}lrcAr.sort((a, b) => a - b);return (lrcTime(lrcAr));}
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => { for (j = 0; j < lrcAr.length; j++) { if (aud.currentTime <= lrcAr) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1; let time = lrcAr - (aud.currentTime - lrcAr); showLrc(time); };
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
face.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

小辣椒 发表于 2026-2-13 21:28

系统复习一下黑黑老师以前分享的播放器教程，，重新做一次有的可以自己修改一下以前自己的不足，感觉挺好的，只是图图秒做，不够精致

走过岁月 发表于 2026-2-13 21:46

精彩连连啊小辣椒，继续欣赏

小辣椒 发表于 2026-2-13 21:48

走过岁月 发表于 2026-2-13 21:46
精彩连连啊小辣椒，继续欣赏

活动帖，重新复习以前学习过的播放器

走过岁月 发表于 2026-2-13 21:51

小辣椒 发表于 2026-2-13 21:48
活动帖，重新复习以前学习过的播放器

真的不错

红影 发表于 2026-2-13 22:12

很漂亮，欣赏亲爱的好帖{:4_187:}

寒冬残荷 发表于 2026-2-13 22:31

欣赏! 老了听不得伤感歌曲！

也曾年轻 发表于 2026-2-14 08:31

https://pic.rmb.bdstatic.com/bjh/news/693df307cd42c2cc2603e2cec3e20a09.gif

偶然~ 发表于 2026-2-14 09:30

感谢小辣椒美女制作的《不再流泪 不再喝醉》，用走心的作品传递着满满的心意。

偶然~ 发表于 2026-2-14 09:31

小辣椒的用心创作，让我们的贺岁活动愈发精彩纷呈，也让花潮论坛的年味愈发浓厚。

偶然~ 发表于 2026-2-14 09:33

看到小辣椒为【花潮贺岁】打造的《不再流泪 不再喝醉》音画，瞬间就被狠狠惊艳到啦！

偶然~ 发表于 2026-2-14 09:35

小辣椒选的红裙美人搭配诗意湖景的画面，和郭力的歌曲完美契合，每一帧都透着满满的用心，把贺岁的氛围感拉得足足的，这才是懂氛围感、会制造惊喜的宝藏美女啊！

偶然~ 发表于 2026-2-14 09:36

真的要狠狠感谢小辣椒美女，用这么走心的作品给花潮论坛添了这么多暖意，提前把满满的祝福送到了大家心坎里！

偶然~ 发表于 2026-2-14 09:38

我要把最诚挚的祝愿送给小辣椒，愿你在马年里，日子像这红裙一样红火亮眼，健康常伴，快乐常随，万事皆顺意！

偶然~ 发表于 2026-2-14 09:38

送上平安，心中甜！
相互牵挂，皆为缘！
心心相印，乐无边！
无限温暖在心间！
我们同乘健康船！
驶向开心每一天！

梦油 发表于 2026-2-14 09:40

那飞舞的彩蝶就是梁山伯与祝英台吧。{:5_106:}

小辣椒 发表于 2026-2-14 18:07

走过岁月 发表于 2026-2-13 21:51
真的不错

谢谢岁月欣赏{:4_187:}

小辣椒 发表于 2026-2-14 18:08

红影 发表于 2026-2-13 22:12
很漂亮，欣赏亲爱的好帖

谢谢亲爱的的夸奖{:4_205:}

小辣椒 发表于 2026-2-14 18:09

寒冬残荷 发表于 2026-2-13 22:31
欣赏! 老了听不得伤感歌曲！

问好老师，是以前做过的歌曲，只是重新做个图，修改一下复习黑黑的代码播放器

小辣椒 发表于 2026-2-14 18:09

也曾年轻 发表于 2026-2-14 08:31


问好老师，谢谢欣赏{:4_187:}

查看完整版本: 【花潮贺岁】不再流泪 不再喝醉 歌手：郭力