论坛 › 欢乐水吧 › 《一人静》（学习黑黑脚链效果）

红影 发表于 2023-9-1 15:07

《一人静》（学习黑黑脚链效果）

<style>
      #papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 614px;box-shadow: 8px 4px 20px hsla(0,0%,0%,.65); overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; animation: flash 6s infinite alternate; --state: running; }
      #papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: gray url('https://pic.imgdb.cn/item/64f18228661c6c8e544c24cc.jpg') no-repeat center/cover;transition: .9s; }
      #papa::after { left: 170px; transform: rotateY(-180deg); }
      #papa:hover::before { transform: scale(1.1); }
      #pic { position: absolute; right: 160px; top:-20px; width: 320px; height: 320px; opacity: 0.8; animation: fadein 3s infinite alternate var(--state); }
       @keyframes flash { from {filter: hue-rotate(0deg); } to {filter: hue-rotate(360deg); } }
       @keyframes fadein { to {opacity: .2; } }
</style>

<div id="papa"><img id="pic" src="https://pic.imgdb.cn/item/64f19402661c6c8e5452bb29.gif" alt="" /></div>
<audio id="aud" src="https://yinyue1111.s3-us-east-1.ossfiles.com/yirenjing11.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: '--bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top: 40px;',
                        fs_css: 'top: 100px; color: #ddd; background: transparent; border: 2px dotted snow;',
                        player_css: `
                              bottom: 30px;
                              border-width: 0;
                              color: #fff;
                              --size: 200px;
                              --bRad: 50% 100%;
                              --track: tan;
                              --prog: magenta;
                              --btnBg: linear-gradient(lime, red);
                        `,
                        lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
                });
      };
})();

</script>

红影 发表于 2023-9-1 15:09

弄个色相变化的背景，就不用费劲去考虑珠珠的颜色设置了，就让它跟着变化吧{:4_173:}

红影 发表于 2023-9-1 15:13

之前下载的一个音乐居然不对，到后直接断了，没办法，截短了点，到第一个小节就行了，文件还能小点{:4_173:}
只是上传完才发现的，删了前面一个，后面这个名字加个序号作为区别了。做时不仔细的缘故，没去听完全曲。

红影 发表于 2023-9-1 15:14

试了一下bRad: 50%的效果，在这个里面不好看，最后弄了bRad: 50% 100%;的效果。

小辣椒 发表于 2023-9-1 17:27

红影 发表于 2023-9-1 15:09
弄个色相变化的背景，就不用费劲去考虑珠珠的颜色设置了，就让它跟着变化吧

亲爱的，想的真周到，这个就是技术活，我就不会加这个效果{:4_199:}

以后就套用你的了，黑黑有这个教程啊，我都不晓得{:4_203:}

小辣椒 发表于 2023-9-1 17:30

制作真漂亮，这个脚链教程是黑黑那个板块里面？

马黑黑 发表于 2023-9-1 18:01

红影 发表于 2023-9-1 15:09
弄个色相变化的背景，就不用费劲去考虑珠珠的颜色设置了，就让它跟着变化吧

这个做法很精妙

红影 发表于 2023-9-1 19:03

小辣椒 发表于 2023-9-1 17:27
亲爱的，想的真周到，这个就是技术活，我就不会加这个效果

以后就套用你的了，黑黑有这个教 ...

有这个教程啊，就是那个醉梦，很漂亮的脚链插件{:4_173:}

红影 发表于 2023-9-1 19:04

小辣椒 发表于 2023-9-1 17:30
制作真漂亮，这个脚链教程是黑黑那个板块里面？

就叫脚链啊，还用醉梦做了个帖子，都是最新的啊。我在努力跟上教程呢{:4_173:}

红影 发表于 2023-9-1 19:04

马黑黑 发表于 2023-9-1 18:01
这个做法很精妙

主要是懒，省得再去使劲调珠珠的颜色了啊{:4_173:}

马黑黑 发表于 2023-9-1 19:37

红影 发表于 2023-9-1 19:04
主要是懒，省得再去使劲调珠珠的颜色了啊

偷懒的往往能出其不意

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

马黑黑 发表于 2023-9-1 19:37
偷懒的往往能出其不意

主要这张背景图的下半部特别适合变色，才忽然想到这个{:4_173:}

马黑黑 发表于 2023-9-1 20:50

红影 发表于 2023-9-1 20:16
主要这张背景图的下半部特别适合变色，才忽然想到这个

一切都是随手拾来

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

马黑黑 发表于 2023-9-1 20:50
一切都是随手拾来

弄好了自己也挺喜欢，这也是做帖子的收获吧{:4_173:}

醉美水芙蓉 发表于 2023-9-1 21:41

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

醉美水芙蓉 发表于 2023-9-1 21:41
变色音画漂亮！

多谢水芙蓉鼓励，主要想让脚链变色的{:4_189:}

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

红影 发表于 2023-9-1 21:21
弄好了自己也挺喜欢，这也是做帖子的收获吧

那当然

红影 发表于 2023-9-2 11:35

马黑黑 发表于 2023-9-1 22:22
那当然

感谢黑黑带来的欢乐{:4_187:}

马黑黑 发表于 2023-9-2 11:39

红影 发表于 2023-9-2 11:35
感谢黑黑带来的欢乐

客气了

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

马黑黑 发表于 2023-9-2 11:39
客气了

不光是这个，其他的好几个也都自己挺喜欢，都是黑黑带来的好处呢{:4_187:}

查看完整版本: 《一人静》（学习黑黑脚链效果）