论坛 › 音乐沙龙 › 《命运的齿轮》TO 雨声

红影 发表于 2023-11-30 10:40

《命运的齿轮》TO 雨声

<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      display: grid;
      place-items: center;
      width: 1024px;
      height: 576px;
      background: lightblue url('https://pic.imgdb.cn/item/656765d2c458853aefcd0e81.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      z-index: 1;
      --state: running;
}
.play_pic {
      position: absolute;
      cursor: pointer;
      width: 360px;
      top: -35px;
      right: -45px;
      opacity: 1;
         --k: 7s;
      filter: hue-rotate(340deg);
      animation: rot var(--k) infinite var(--state);
}
.play_pic:nth-of-type(1) {
      width: 200px;
      top: 330px;
      left:726px;
      opacity: .7;
         --k: 12s;
}
.play_pic:nth-of-type(2) {
      width: 240px;
      top: 140px;
      left: 185px;
      opacity: .45;
      filter: hue-rotate(30deg);
      --k: 7s;      
}
.play_pic:nth-of-type(3) {
      width: 100px;
      top: 310px;
      left: 900px;
      opacity: .8;
      filter: hue-rotate(0deg);
      --k: 9s;      
}
.play_pic:nth-of-type(4) {
      width: 270px;
      top: 200px;
      left: -50px;
      opacity: .9;
      filter: hue-rotate(280deg);
      --k: 9s;      
}
.play_pic:nth-of-type(5) {
      width: 230px;
      top: 362px;
      left: 126px;
      opacity: .7;
      filter: hue-rotate(320deg);
      --k: 14s;      
}
.play_pic:nth-of-type(6) {
      width: 160px;
      top: 120px;
      left: 150px;
      opacity: .95;
      filter: hue-rotate(330deg);
      --k: 13s;      
}
.play_pic:nth-of-type(7) {
      width: 140px;
      top: 20px;
      left: 10px;
      opacity: .5;
      filter: hue-rotate(330deg);
      --k: 13s;      
}
@keyframes rot {
      to { transform: rotate(1turn); }
}

</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2069700427" autoplay loop></audio>
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
      <img class="play_pic" src="https://pic.imgdb.cn/item/65676620c458853aefce2a7d.png" alt="" />
</div>

<script>

let lrcAr = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
];

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('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
      HCPlayer({
                papa: '#papa',
                lrcAr: lrcAr,
                lrc_css: 'top: 28px; right: 360px; font-size: 2.2em; color: Linen;--bg: linear-gradient(rgba(255,189,76,.25),rgba(225,106,246,.9));',
      });
});
</script>

红影 发表于 2023-11-30 10:42

刚学的一个新作业，作为礼物送给雨声姐。欢迎你的到来，愿你在花潮玩得开心@雨声{:4_187:}

红影 发表于 2023-11-30 10:46

本来想学个黑黑的最新的《半纸心事》的效果，结果发现因为齿轮的位置和大小各不相同，没有规律，用不上那个帖子里的JS操作，只能用《檐下客》里的效果了。为了配合底图，每一个齿轮单独调位，累蒙了@马黑黑 {:4_173:}

梦油 发表于 2023-11-30 11:12

这齿轮真不少啊，而且转转停停的还挺有趣。

亦是金 发表于 2023-11-30 11:18

问好红影！{:4_187:}齿轮真多，我被转蒙了！{:4_189:}

醉美水芙蓉 发表于 2023-11-30 11:26

雨声 发表于 2023-11-30 13:16

红影 发表于 2023-11-30 10:42
刚学的一个新作业，作为礼物送给雨声姐。欢迎你的到来，愿你在花潮玩得开心@雨声

艾玛，上来就有妹妹送的精彩礼物收，甚是开心，谢谢妹妹{:4_179:}

雨声 发表于 2023-11-30 13:19

红影 发表于 2023-11-30 10:46
本来想学个黑黑的最新的《半纸心事》的效果，结果发现因为齿轮的位置和大小各不相同，没有规律，用不上那个 ...

妹妹太厉害了，我是最仰慕会运用代码的人了，
这礼物太精彩，都是老朋友了客套的话不说了，
安暖相伴，快乐前行！{:4_179:}

雨声 发表于 2023-11-30 13:20

在谢谢妹妹送的精美礼物，抱回家珍藏，祝妹妹一切安好，快乐相伴！{:4_179:}

红影 发表于 2023-11-30 16:53

梦油 发表于 2023-11-30 11:12
这齿轮真不少啊，而且转转停停的还挺有趣。

我是一个一个单独设置的，特别麻烦，黑黑那种用JS一下子能设置好几个，我倒是想学那个{:4_173:}

红影 发表于 2023-11-30 16:54

亦是金 发表于 2023-11-30 11:18
问好红影！齿轮真多，我被转蒙了！

我做到时候更晕，记错顺序，就会让已经调好的又移位了{:4_196:}

红影 发表于 2023-11-30 16:55

醉美水芙蓉 发表于 2023-11-30 11:26
红影美女厉害！做得效果很不错！

谢谢水芙蓉美女鼓励，我是跟在后面把花朵换成齿轮了{:4_173:}

红影 发表于 2023-11-30 16:56

雨声 发表于 2023-11-30 13:16
艾玛，上来就有妹妹送的精彩礼物收，甚是开心，谢谢妹妹

昨天看到雨声姐就想着要做个帖子了，到今天才做完。图图不漂亮，但心意很真{:4_179:}

红影 发表于 2023-11-30 16:57

雨声 发表于 2023-11-30 13:19
妹妹太厉害了，我是最仰慕会运用代码的人了，
这礼物太精彩，都是老朋友了客套的话不说了，
安暖相伴， ...

我也不会啊，只不过是套用和修改了一下黑黑的代码呢{:4_173:}
抱抱，你开心是我最大的快乐{:4_183:}

红影 发表于 2023-11-30 16:57

雨声 发表于 2023-11-30 13:20
在谢谢妹妹送的精美礼物，抱回家珍藏，祝妹妹一切安好，快乐相伴！

谢谢雨声姐的美好祝福，我们一起快乐{:4_185:}

梦油 发表于 2023-11-30 16:59

红影 发表于 2023-11-30 16:53
我是一个一个单独设置的，特别麻烦，黑黑那种用JS一下子能设置好几个，我倒是想学那个

嗬，这么多是够麻烦的。

红影 发表于 2023-11-30 20:05

梦油 发表于 2023-11-30 16:59
嗬，这么多是够麻烦的。

没敢全加进去，弄完一个再弄另一个{:4_173:}

幸运草 发表于 2023-11-30 20:29

介么多轮子，金轮法王吖{:6_242:}

红影 发表于 2023-11-30 20:42

幸运草 发表于 2023-11-30 20:29
介么多轮子，金轮法王吖

是啊，功夫很高，可以一只手玩很多轮子{:4_189:}

冬天的雨 发表于 2023-11-30 20:49

本帖最后由 冬天的雨 于 2023-11-30 20:55 编辑

美女你最美。无论做帖的构思和制作，都是最棒的，冬雨的偶像{:4_178:}非常的震撼，齿轮可以这么多图图链接，计算出来链接位置太厉害了

查看完整版本: 《命运的齿轮》TO 雨声