论坛 › 祝福礼堂 › 《生日歌》贺快乐生辰（2023年中秋）

红影 发表于 2023-9-29 14:25

《生日歌》贺快乐生辰（2023年中秋）

<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/65163da1c458853aefed0914.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#face {
      position: absolute;
      top: 92px; left: 152px;
      width: 352px;
      height: 352px;
      cursor: pointer;
}
#face > span {
      position: absolute;
      top: 64px;
      width: 48px;
      height: 80px;
      border-radius: 50%;
      background: #000;

}
#face > span:nth-of-type(1) {
      left: 64px;
      animation: mov .5s infinitealternate var(--state);
      --xx: 10px;
}
#face > span:nth-of-type(2) {
      left: 240px;
      animation: mov .5s infinite linear alternate var(--state);
      --xx: -10px;
}
#pic { position: absolute; right: 360px; bottom: 160px; width: 180px; height: 180px; animation: flash 1.5sinfinite alternate var(--state);}
@keyframes mov {to { transform: translate(var(--xx)); } }
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0.5; transform: rotate(5deg); } }
</style>

<div id="papa"><div id="face"><span></span><span></span></div><img id="pic" src="https://s1.ax1x.com/2023/08/02/pPPIIOK.png" alt="" />
      <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/04/11/39309404bfcad9b724a2daf72ed9ef8b.mp3" autoplay loop></audio>
</div>

<script>
      
(function() {
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
      let loadJs = (url,callback) => {
                let body = document.querySelector('body'), jsNode = document.createElement('script');
                jsNode.charset = 'utf-8';
                jsNode.setAttribute('src', url);
                body.appendChild(jsNode);
                jsNode.onload = () => callback();
      };
      loadJs(js1, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 90px; left: 560px; --bg: linear-gradient(180deg, hsla(60, 100%, 50%, .45), hsla(0, 100%, 50%, .6), hsla(0, 100%, 50%, .85));',
                        fs_css: 'color: #eee; background: transparent; bottom: -100px;',
                        player_css: 'width: 352px; height: 120px; bottom: 255px;left: 152px;',
                        path: 'M70 30 Q165 140 280 30',
                        btn: {left: 110, top: -0},
                        track: {track: '#666', prog: '#ff0000'},
                        img: {
                              play: 'https://638183.freep.cn/638183/t23/btn/play2.png',
                              pause: 'https://638183.freep.cn/638183/t23/btn/pause2.png'
                        }
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 20,
                        size: {width: 40, height: 40},
                        shape: {background: 'url("https://pic.imgdb.cn/item/65164baac458853aefefe4ca.png")', borderRadius: '0'},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: 200, y: 0},
                });
      });
})();

</script>

红影 发表于 2023-9-29 14:26

https://i02piccdn.sogoucdn.com/5c40552935b335b1
快乐的生日正好是中秋佳节，非常美好的日子。祝你生日快乐@快乐{:4_187:}

红影 发表于 2023-9-29 14:27

新学的代码，用弧形的进度条去模拟一下笑脸{:4_173:}

马黑黑 发表于 2023-9-29 15:14

{:4_199:}

梦油 发表于 2023-9-29 15:29

借红影美帖祝快乐朋友生日快乐
祝红影阖家欢乐幸福安康

快乐 发表于 2023-9-29 16:22

红影 发表于 2023-9-29 14:26
快乐的生日正好是中秋佳节，非常美好的日子。祝你生日快乐@快乐


大家一起吃蛋糕啦，祝我们永远快乐！{:4_176:}{:4_176:}{:4_176:}{:4_187:}{:4_187:}{:4_187:}

快乐 发表于 2023-9-29 16:26

红影 发表于 2023-9-29 14:27
新学的代码，用弧形的进度条去模拟一下笑脸

厉害了，做的好看{:4_199:}

快乐 发表于 2023-9-29 16:27

红影 发表于 2023-9-29 14:27
新学的代码，用弧形的进度条去模拟一下笑脸

可爱的笑脸播放器，很温馨，感谢影子！也祝你和花坛的朋友们中秋，国庆快乐！{:4_177:}{:4_177:}{:4_177:}

快乐 发表于 2023-9-29 16:29

马黑黑 发表于 2023-9-29 15:14


谢谢朋友，节日愉快！{:4_190:}

快乐 发表于 2023-9-29 16:30

梦油 发表于 2023-9-29 15:29
借红影美帖祝快乐朋友生日快乐
祝红影阖家欢乐幸福安康

大家一起吃蛋糕啦，祝我们永远快乐！{:4_176:}{:4_176:}{:4_176:}

快乐 发表于 2023-9-29 16:36

红影 发表于 2023-9-29 14:27
新学的代码，用弧形的进度条去模拟一下笑脸

好听的生日快乐，美美的祝福，好开心.....
{:4_179:}

马黑黑 发表于 2023-9-29 17:02

快乐 发表于 2023-9-29 16:29
谢谢朋友，节日愉快！

{:4_191:}

梦油 发表于 2023-9-29 17:15

快乐 发表于 2023-9-29 16:30
大家一起吃蛋糕啦，祝我们永远快乐！

让我们一起开心，一起欢乐。

醉美水芙蓉 发表于 2023-9-29 18:33

小辣椒 发表于 2023-9-29 19:17

每年的今天都有亲爱的最精致的贺帖，快乐收礼开心{:4_177:}

三月的阳光 发表于 2023-9-29 20:43

借子妹妹影美帖祝快乐朋友生日快乐{:4_187:}

焱鑫磊 发表于 2023-9-29 21:49

欣赏佳帖！{:4_187:}

非常开心 发表于 2023-9-29 22:43

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F4308338%2F609d9715323e19a55dba4638ae7dfe3f.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNDMwODMzOC82MDlkOTcxNTMyM2UxOWE1NWRiYTQ2MzhhZTdkZmUzZi5naWY%3D%2Fsign%2F04d33c96d37239c37af3588ba29fa19b.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1698590605&t=b844a8623ba57c123c1e35c8b652d6d2

红影 发表于 2023-9-29 23:19

马黑黑 发表于 2023-9-29 15:14


把以前的眼睛晃动也用上了。呵呵，用二次贝塞尔曲线无法完全拟合原本的笑脸弧线呢。

红影 发表于 2023-9-29 23:20

梦油 发表于 2023-9-29 15:29
借红影美帖祝快乐朋友生日快乐
祝红影阖家欢乐幸福安康

谢谢，和梦油一起祝福{:4_204:}

查看完整版本: 《生日歌》贺快乐生辰（2023年中秋）