论坛 › 祝福礼堂 › 《生日礼物》贺 友昕 生辰（8.4）

红影 发表于 2023-8-2 19:40

《生日礼物》贺 友昕 生辰（8.4）

<style>
#mydiv { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://s1.ax1x.com/2023/07/31/pP9TJUJ.jpg') no-repeat center/cover; box-shadow: 0 0 8px 0 #000; opacity: .95; overflow: hidden; z-index: 1; position: relative; --state: paused; }
#lrc { position: absolute; top: 20px; left: 50%; transform: translate(-50%);font: bold 2.8em sans-serif; color: hsl(60,48%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(320,100%,90%,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(0,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
pinpu-wrapper { position: absolute; bottom: 0; left: 50%; transform: translate(-50%); cursor: pointer; }
pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);--psw: 6px; }
pin-pu::before { content: ''; position: absolute; left: calc(50% - var(--psw) / 2); top: -10px; width: var(--psw); height: var(--psw); border-radius: 50%; background: snow; }
.vid { position: absolute;left: 112px;top:112px; width: 800px; height: 450px; object-fit: cover; opacity: 0.5; clip-path: circle(80% at bottom) ;mix-blend-mode: lighten; }
#pic { position: absolute; right: 90px; top: 90px; width: 180px; height: 180px; animation: flash 1.5sinfinite alternate var(--state);}
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0.5; transform: rotate(5deg); } }
</style>

<div id="mydiv">
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e5940fc4d4a6_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="pic" src="https://s1.ax1x.com/2023/08/02/pPPIIOK.png" alt="" />
<css-doodle id="mplayer">
    :doodle {
      @grid: 8 / 500px;
      background: url('https://s1.ax1x.com/2023/08/02/pPPIhS1.png') no-repeat 0px 50px / 160px 200px;
      cursor: pointer;
      position: absolute;
      left: 20px;
      top: 120px;
      --state: running;
    }
    :doodle(:hover) { transform: skew(2deg); }
    position: absolute;
    @place-cell: 160px 40%;
    :after {
      content: @p(友,昕,生,,快,友昕,);
      color: @p(red,pink,orange,green,blue,white);
    }
    animation: fly 3s @r(-1,2)s infinite var(--state);
    @keyframes fly {
      from { transform: rotate(0deg) translate(0px); }
      to { transform: rotate(@r(-60,60)deg) translate(110px); }
    }
</css-doodle>   
<pinpu-wrapper></pinpu-wrapper>
    <div id="lrc"data-lrc="花潮lrc在线">花潮lrc在线</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/04/b92b88e219abdb50bd17af1bcc23ad35.mp3" autoplay loop></audio>

<script>

~function() {
let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      let pinpuNum = 160, pinpuWidth = 4, pinpuHeight = 200, mKey = 0, mFlag = true, slip = 0.2;
      let ppwrap = document.querySelector('pinpu-wrapper');
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), mplayer.style.setProperty('--state','paused'),lrc.style.setProperty('--state','paused')) : (mydiv.style.setProperty('--state','running'),mplayer.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = 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 msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
      ~function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;left: ${(pinpuWidth + 2) * key}px;background: #${Math.random().toString(16).substr(-6)};--height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)}px;--du: ${Math.random() * 1.2 + 1.2}s;--delay: -${Math.random()}s;`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('seeked', calcKey, false);
      aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr + slip) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
      ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
}();

</script>

红影 发表于 2023-8-2 19:43

友昕斑斑的生日马上要到了，祝你所有的希望都能如愿，所有的梦想都能实现。生日快乐@友昕 {:4_187:}

梦油 发表于 2023-8-2 19:57

借红影美帖祝福友昕版主生日快乐、心想事成。

醉美水芙蓉 发表于 2023-8-2 21:00

红影 发表于 2023-8-2 21:08

梦油 发表于 2023-8-2 19:57
借红影美帖祝福友昕版主生日快乐、心想事成。

跟梦油一起祝福友昕生日{:4_187:}

红影 发表于 2023-8-2 21:08

醉美水芙蓉 发表于 2023-8-2 21:00
好漂亮的生日贴！

谢谢水芙蓉美女，我们一起祝福{:4_187:}

友昕 发表于 2023-8-2 21:40

谢谢红影！精彩的制作，温馨的歌曲，好漂亮的帖子，再次感谢！{:4_204:}

友昕 发表于 2023-8-2 21:42

梦油 发表于 2023-8-2 19:57
借红影美帖祝福友昕版主生日快乐、心想事成。

谢谢梦油！{:4_180:}

红影 发表于 2023-8-2 21:52

友昕 发表于 2023-8-2 21:40
谢谢红影！精彩的制作，温馨的歌曲，好漂亮的帖子，再次感谢！

不客气啊，友昕出生在8月，最热烈的季节呢{:4_173:}

梦油 发表于 2023-8-3 15:19

友昕 发表于 2023-8-2 21:42
谢谢梦油！

昕版别客气。

小辣椒 发表于 2023-8-3 21:39

亲爱的~~好漂亮的生日贺帖{:4_178:}

小辣椒 发表于 2023-8-3 21:41

友昕 发表于 2023-8-2 21:40
谢谢红影！精彩的制作，温馨的歌曲，好漂亮的帖子，再次感谢！

友昕生日快乐~~还好是明天，还来得及，先送生日祝福。。。。

{:4_177:}{:4_204:}{:4_191:}{:4_176:}

友昕 发表于 2023-8-3 21:50

小辣椒 发表于 2023-8-3 21:41
友昕生日快乐~~还好是明天，还来得及，先送生日祝福。。。。

谢谢辣椒，大家都不用送礼贴，我一般都不过生日的

红影 发表于 2023-8-3 22:23

小辣椒 发表于 2023-8-3 21:39
亲爱的~~好漂亮的生日贺帖

跟亲爱的一起祝福友昕生日快乐{:4_187:}

小九 发表于 2023-8-5 21:04

友昕 发表于 2023-8-3 21:50
谢谢辣椒，大家都不用送礼贴，我一般都不过生日的

生日快乐！{:4_187:}{:5_166:}

友昕 发表于 2023-8-5 23:05

小九 发表于 2023-8-5 21:04
生日快乐！

谢谢小九！祝夏安{:4_180:}

大猫咪 发表于 2023-10-5 13:52

漂亮 的制作，真棒！和红影一起祝福友昕生日快乐！ 幸福安康！

{:4_187:}{:4_204:}{:4_191:}{:4_176:}{:4_177:}{:5_166:}{:5_166:}{:4_179:}

红影 发表于 2023-10-5 19:04

大猫咪 发表于 2023-10-5 13:52
漂亮 的制作，真棒！和红影一起祝福友昕生日快乐！ 幸福安康！

{: ...

哈哈，都过去那么久了啊{:4_173:}

查看完整版本: 《生日礼物》贺 友昕 生辰（8.4）