论坛 › 祝福礼堂 › 《下沙》贺三月的阳光生辰（11.21）

红影 发表于 2023-11-21 14:14

《下沙》贺三月的阳光生辰（11.21）

<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/655238f6c458853aef88400b.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; }
#sky { position: absolute; width: 400px; height: 400px; top: 30%; left: 32%; }
#btnPlay { filter: hue-rotate(340deg); }
#tutu { position: absolute; width: 329px; height: 520px; bottom: 0; right: 0; }
</style>
<div id="papa"><div id="sky"></div><img id="tutu" src="https://pic.imgdb.cn/item/655bfd36c458853aeffd4092.gif" alt="" />
      <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/07/19/b24ea541f7e0d8129db7500e23a07b33.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_02.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: 10px; --bg: linear-gradient(rgba(218,165,32,.35),rgba(218,165,32,.7)); color: snow;',
                        fs_css: 'bottom: 3%; left: 136px; transform: translate(0,-35px); background: transparent; --color: GoldEnrod;',
                        player_css: 'width: 330px; height: 220px; top: 51%; left: 1%; background: url("https://pic.imgdb.cn/item/6552391cc458853aef88dfc6.png") no-repeat center/cover;',
                        path: 'm158,42c0,0 -8,-6 -8.16666,-6.41666c0.16666,0.41666 -19.83334,1.91666 -19.83334,1.91666c0,0 -10,1 -10.16666,0.58334c0.16666,0.41666 -61.33334,4.91666 -61.5,4.5c0.16666,0.41666 -18.83334,1.41666 -19,1c0.16666,0.41666 -7.83334,-0.08334 -7.83334,0.91666c0,1 -2,7 -2,7c0,0 3.5,5 3.5,5.5c0,0.5 49,-2 49,-2c0,0 -2,111.5 -2,111.5c0.5,4 13,5 13,5c12.5,0.5 15.5,-3.5 15.33334,-3.91666c0.16666,0.41666 1.16666,-72.08334 0.66666,-72.08334c-0.5,0 14,6.5 15,6.5c1,0 1,9 0.83334,8.58334c0.16666,0.41666 5.16666,2.91666 6.16666,2.91666c1,0 19,-0.5 18.83334,-0.91666c0.16666,0.41666 0.66666,-9.58334 0.5,-10c0.16666,0.41666 -10.83334,-11.58334 -11,-12c0.16666,0.41666 -17.83334,-7.58334 -18,-8c0.16666,0.41666 -11.83334,-0.08334 -12,-0.5c0.16666,0.41666 -3.33334,-23.08334 -3.5,-23.5c0.16666,0.41666 11.66666,-7.58334 11.5,-8c0.16666,0.41666 28.66666,0.91666 28.66666,0.91666c0,0 12,-5.5 11.83334,-5.91666c0.16666,0.41666 14.66666,13.41666 13.16666,8.91666c19.5,12 20,17 20.5,17c0.5,0 -18.5,-13.5 -18.5,-13.5c-8,-7.5 5,-7.5 5,-7.5c0,0 13,0.5 13,0.5c0,0 20.5,15 21,15c0.5,0 0,7 -0.16666,6.58334c0.16666,0.41666 -13.83334,3.41666 -13.83334,3.41666c0,0 -20,5 -20,5c0,0 21,16 21,16c0,0 -17,-16.5 -23.5,-15.5c-11,-0.5 -16.5,2 -16.66666,1.58334c0.16666,0.41666 23.16666,18.41666 23.16666,18.41666c0,0 11,0.5 11,0.5c0,0 1,8 1,8c0,0 -30,50.5 -30,50.5c0,0 5,8.5 4.83334,8.08334c0.16666,0.41666 13.16666,-0.08334 17.16666,-4.08334c4,-4 19,-38 19,-38c0,0 1,-11.5 1,-11.5c0,0 -3.5,-4 -9.16666,-6.41666c-0.33334,-0.08334 6.16666,2.41666 6.16666,2.41666c0,0 5,-1.5 5,-1.5c0,0 10.5,-39 10.5,-39c0,0 15.5,11.5 15.33334,11.08334c0.16666,0.41666 -5.33334,18.91666 -5.33334,18.91666c0,0 1,7 1,7c0,0 -8,7 -8,7c0,0 -10,-1.5 -10.16666,-1.91666c0.16666,0.41666 5.66666,3.41666 5.66666,3.41666c0,0 12,-4 12,-4c0,0 10.5,1 10.5,1c0,0 -1.5,-17 -1.66666,-17.41666c0.16666,0.41666 4.66666,-24.58334 4.5,-25c0.16666,0.41666 -3.83334,-36.58334 -3.83334,-36.58334c0,0 14.5,3 14.33334,2.58334c0.16666,0.41666 6.16666,0.41666 6.16666,0.41666c0,0 2.5,11.5 2.5,11.5c0,0 0,13 0,13c0,0 6.5,2.5 7.5,3c1,0.5 13,2 12.83334,1.58334c0.16666,0.41666 17.66666,22.41666 17.5,22c0.16666,0.41666 3.66666,9.41666 3.66666,9.41666c0,0 -17.5,2 -17.66666,1.58334c0.16666,0.41666 -5.33334,-7.08334 -5.5,-7.5c0.16666,0.41666 -8.83334,-16.08334 -9,-16.5c0.16666,0.41666 -9.33334,-7.08334 -9.5,-7.5c0.16666,0.41666 -0.33334,24.41666 -0.33334,24.41666c0,0 14,5.5 13.83334,5.08334c0.16666,0.41666 4.16666,10.91666 4,10.5c0.16666,0.41666 -3.83334,15.91666 -3.83334,15.91666c0,0 -9,20.5 -9.16666,20.08334c0.16666,0.41666 -9.33334,12.41666 -9.33334,12.41666c0,0 -28,14.5 -28.16666,14.08334c0.16666,0.41666 -11.83334,3.91666 -12.33334,3.91666c-0.5,0 -5.5,-2.5 -5.66666,-2.91666c0.16666,0.41666 -0.33334,-4.58334 -0.33334,-4.58334c0,0 32.5,-22 32.33334,-22.41666c0.16666,0.41666 11.66666,-13.08334 11.5,-13.5c0.16666,0.41666 1.66666,-7.08334 1.5,-7.5c0.16666,0.41666 -9.83334,3.41666 -9.83334,3.41666c0,0 -5.5,-5.5 -5.66666,-5.91666',
                        btn: {left: 100, top: 190},
                        track: {track: 'rgba(119,163,184,.25)', prog: 'Orange'},
                        img: {play: '', pause: ''}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 30,
                        size: {width: 5, height: 5},
                        shape: {background: 'rgba(255,255,0,.35)', borderRadius: '50%'},
                        maxTime: 24,
                        offset: {x: 0, y: 0},
                        ani: 'c2Out',
                          css: 'opacity: .8;',
                });
      });
})();

</script>

三月的阳光 发表于 2023-11-21 14:17

沙发享受起来~~{:4_205:}{:4_205:}

红影 发表于 2023-11-21 14:17

今天是阳光哥哥的生日，用新学的用文字描边路径，送给@三月的阳光 祝生日快乐{:4_187:}

三月的阳光 发表于 2023-11-21 14:19

红影 发表于 2023-11-21 14:17
今天是阳光哥哥的生日，用新学的用文字描边路径，送给@三月的阳光 祝生日快乐

谢谢影子妹妹，这俩文字果然很特别~~{:4_199:}{:4_199:}

红影 发表于 2023-11-21 14:19

这两个字比较好弄，所以就选了这首歌。部分地方自己做了些小连线，来保证是单路径。
真正的原因是亦是金老师那种描边不会弄，那种应该做起来更方便点{:4_173:}

红影 发表于 2023-11-21 14:21

谢谢黑黑的代码{:4_204:}

红影 发表于 2023-11-21 14:22

三月的阳光 发表于 2023-11-21 14:17
沙发享受起来~~

阳光哥哥在啊，今天是你的生日，生日快乐{:5_166:}{:4_191:}

红影 发表于 2023-11-21 14:23

红影 发表于 2023-11-21 14:17
今天是阳光哥哥的生日，用新学的用文字描边路径，送给@三月的阳光 祝生日快乐

新学的技能，那个描边就是路径，和歌曲进度是对应的{:4_173:}

三月的阳光 发表于 2023-11-21 14:24

默念阿弥陀佛，睁眼看尘世，还是动态的，影子妹妹的制作精妙~~{:4_199:}{:4_199:}

三月的阳光 发表于 2023-11-21 14:25

红影 发表于 2023-11-21 14:19
这两个字比较好弄，所以就选了这首歌。部分地方自己做了些小连线，来保证是单路径。
真正的原因是亦是金老 ...

影子妹妹，辛苦了~~{:4_187:}

红影 发表于 2023-11-21 14:25

三月的阳光 发表于 2023-11-21 14:19
谢谢影子妹妹，这俩文字果然很特别~~

这两个字笔画少，做起来更方便点，笔画多的不知道怎么弄了。
两个字是用在线艺术字生成做的{:4_173:}

三月的阳光 发表于 2023-11-21 14:27

红影 发表于 2023-11-21 14:22
阳光哥哥在啊，今天是你的生日，生日快乐

我就在等着影子妹妹的蛋糕和美酒呢，赶紧收礼了~~{:4_173:}{:4_173:}

三月的阳光 发表于 2023-11-21 14:29

红影 发表于 2023-11-21 14:25
这两个字笔画少，做起来更方便点，笔画多的不知道怎么弄了。
两个字是用在线艺术字生成做的

那等我空了也想学学~~{:4_173:}

小文 发表于 2023-11-21 15:36

生日快乐！

红影 发表于 2023-11-21 16:03

三月的阳光 发表于 2023-11-21 14:24
默念阿弥陀佛，睁眼看尘世，还是动态的，影子妹妹的制作精妙~~

这个图图是以前收集的，挺喜欢，感觉挺适合这个帖子，就放进来了{:4_204:}
看遍尘世起起落落，保持一颗安然纯净的心灵。

红影 发表于 2023-11-21 16:04

三月的阳光 发表于 2023-11-21 14:25
影子妹妹，辛苦了~~

不客气啊，再祝阳光哥哥生日快乐{:4_176:}

红影 发表于 2023-11-21 16:05

三月的阳光 发表于 2023-11-21 14:29
那等我空了也想学学~~

好啊，大家一起做彼此交流，会更有趣呢{:4_204:}

红影 发表于 2023-11-21 16:06

小文 发表于 2023-11-21 15:36
生日快乐！

跟小文一起祝福{:4_204:}

梦油 发表于 2023-11-21 17:58

借影子朋友美帖，祝福阳光朋友生日快乐、万事如意！

亦是金 发表于 2023-11-21 18:09

欣赏红影美帖！{:4_187:}我也要试试这种路径制作！

查看完整版本: 《下沙》贺三月的阳光生辰（11.21）