小辣椒 发表于 2023-9-1 21:24

学习黑黑（醉梦--脚链）频谱效果

<style>
      #papa { margin: 150px 0 0 calc(50% - 730px); width: 1284px; height: 756px; background: url('https://xlaj.cn/assets/file/zp/20230901205842.gif') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   

#papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/star.gif'); top: 0; left: 300; mix-blend-mode: screen; animation: fadein 1s infinite alternate var(--state); }
      #papa::after { left: 970px; transform: rotateY(-180deg); }

      @keyframes fadein { to {opacity: .1; } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/a4fb-audiofreehighqps/F6/B6/GKwRIDoIgO36ACAAAAI12ZHe.mp3" crossorigin="anonymous" autoplay loop></audio>

<script>
      
(function() {
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/xyanklet_lrc.js';
      script.charset = 'utf-8';
      document.head.appendChild(script);
      let geci = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
      script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: 'top: 85%;',
                        fs_css: 'top: 70%; color: #ddd; background: #000;',
                        player_css: `
                                 left: 36.5%;top:20%;
                              border-width: 0;
                              color: #fff;
                              --size: 320px;
                                  --bRad: 32% 18% 35% 15% / 16% 10% 40% 35%;
                              --track: tan;
                              --prog: magenta;
                              --btnBg: linear-gradient(lime, red);
                        `,
                        lizi: { color1: '', color2: 'rgba(32,178,170,.75)' },
                });
      };
})();

</script>

小辣椒 发表于 2023-9-1 21:25

@马黑黑

{:4_170:}纯瞎捣鼓

小辣椒 发表于 2023-9-1 21:26

节约时间，旧歌曲的歌词同步练习一下{:4_172:}

小辣椒 发表于 2023-9-1 21:28

本来想全屏欣赏隐藏的，因为全屏圆频谱播放器和图图不一致了，后来想想算了，反正就是练习

小辣椒 发表于 2023-9-1 21:29

这个背景图我很喜欢的，刚好用上了，只是加的人物不够漂亮一直没有用

红影 发表于 2023-9-1 21:53

这个脚链的珠珠形状调得漂亮，这个好像是岁月的灯光效果吧，看到地上还有倒影呢{:4_173:}
亲爱的这个制作真漂亮{:4_199:}

红影 发表于 2023-9-1 21:54

这个珠珠的感觉好像带着立体感呢，太美了{:4_199:}

红影 发表于 2023-9-1 21:55

动态效果也都设计得很棒。欣赏亲爱的好帖{:4_187:}

小辣椒 发表于 2023-9-1 21:58

红影 发表于 2023-9-1 21:53
这个脚链的珠珠形状调得漂亮，这个好像是岁月的灯光效果吧，看到地上还有倒影呢
亲爱的这个制作 ...

圆的闪光效果是岁月的IE制作。其他都是我瞎加上去的{:4_189:}

小辣椒 发表于 2023-9-1 22:00

红影 发表于 2023-9-1 21:54
这个珠珠的感觉好像带着立体感呢，太美了

这个取教程源码的时候我没有注意看黑黑下面的文字，结果我自己瞎捣鼓了

亚伦影音工作室 发表于 2023-9-1 22:00

С

小辣椒 发表于 2023-9-1 22:01

红影 发表于 2023-9-1 21:55
动态效果也都设计得很棒。欣赏亲爱的好帖

亲爱的，现在做好帖就这么迟了，我得下了，明天见了

红影 发表于 2023-9-1 22:16

小辣椒 发表于 2023-9-1 21:58
圆的闪光效果是岁月的IE制作。其他都是我瞎加上去的

吻合得很棒呢，漂亮{:4_199:}

马黑黑 发表于 2023-9-1 22:16

小辣椒 发表于 2023-9-1 21:25
@马黑黑

纯瞎捣鼓

加了filter drop-shadow 还是 box-shadow ？

红影 发表于 2023-9-1 22:17

小辣椒 发表于 2023-9-1 22:00
这个取教程源码的时候我没有注意看黑黑下面的文字，结果我自己瞎捣鼓了

鼓捣得很好啊，特别喜欢珠珠的形状呢{:4_187:}

红影 发表于 2023-9-1 22:17

小辣椒 发表于 2023-9-1 22:01
亲爱的，现在做好帖就这么迟了，我得下了，明天见了

嗯嗯，赶紧去休息。一会我也下了。亲爱的好梦{:4_185:}

虎妞 发表于 2023-9-1 22:32

欣赏我家亲爱哒美帖，把这美帖看进眼里，能做个好梦哈{:4_185:}

醉美水芙蓉 发表于 2023-9-2 07:06

焱鑫磊 发表于 2023-9-2 09:21

欣赏佳作！{:4_187:}

小辣椒 发表于 2023-9-3 20:46

亚伦影音工作室 发表于 2023-9-1 22:00
С

亚伦手机吃字了
页: [1] 2 3
查看完整版本: 学习黑黑（醉梦--脚链）频谱效果