马黑黑 发表于 2022-5-19 21:57

孔雀舞改装版代码分享

本帖最后由 马黑黑 于 2022-5-20 13:00 编辑

修改了队长的代码，就按这个：
<style>
.outerbox {
      position: relative;
      left: -242px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1080px;
      height: 666px;
      background: #888 url('https://pic.imgdb.cn/item/6286f8d809475431290823e9.jpg') no-repeat center/cover;
      box-shadow: 2px 2px 8px rgba(0,0,0,.95);
      perspective: 3000px;
}
.innerbox {
      background: #666;
      box-shadow: 2px 2px 6px rgba(0,0,0,.85);
      transform-style: preserve-3d;
      animation: flyout 6s linear infinite alternate;
}
@keyframes flyout {
      0% { transform: rotate(0turn); width: 1px; height: 1px; }
      80%, 100% { transform: rotate(2turn); width: 600px; height: 600px; }
}
</style>

<div class="outerbox">
        <div class="innerbox"></div>
</div>

<script>

let picAr = [
      'https://pic.imgdb.cn/item/6286f9ce0947543129098349.jpg',
      'https://pic.imgdb.cn/item/6286fa9f09475431290ad48e.jpg',
      'https://pic.imgdb.cn/item/6286fb2809475431290b5d51.jpg',
      'https://pic.imgdb.cn/item/6286fbb809475431290bb0aa.jpg',
      'https://pic.imgdb.cn/item/6286fc9109475431290c3227.jpg'
];

let idx = 0;
let outer = document.querySelector('.outerbox');
let inner = document.querySelector('.innerbox');
let aud = document.createElement('iframe');
aud.src = 'https://music.163.com/outchain/player?type=2&id=1359398436&auto=1&height=66';
aud.style.display = 'none';
outer.appendChild(aud);

setBgImg();

setInterval(setBgImg, 12000);

function setBgImg(){
      inner.style = `background: url(${picAr}) no-repeat center/cover`;
      idx += 1;
      if(idx >= picAr.length) idx = 0;
}

</script>

马黑黑 发表于 2022-5-19 21:57

本帖最后由 马黑黑 于 2022-5-20 13:02 编辑

说明：

① 第10行：背景图片地址要填写正确的图片地址，这是帖子背景图；

② 第33行起，图片地址数组，一行写一个地址，每个地址头尾都有小角单引号（也可以用小角双引号，前后统一即可），每个地址结束后用小角逗号收尾，但最后一个地址不能用逗号收尾；

③第43-46行是网易云音乐地址

红影 发表于 2022-5-19 22:11

这个即使没有图片序号也可以了。黑黑辛苦{:4_187:}

马黑黑 发表于 2022-5-19 22:15

红影 发表于 2022-5-19 22:11
这个即使没有图片序号也可以了。黑黑辛苦

图片地址直接加入数组

岩新新 发表于 2022-5-19 22:40

欣赏学习！

马黑黑 发表于 2022-5-19 22:41

岩新新 发表于 2022-5-19 22:40
欣赏学习！

{:4_190:}

醉美水芙蓉 发表于 2022-5-20 07:05

醉美水芙蓉 发表于 2022-5-20 07:06

马黑黑 发表于 2022-5-20 07:15

醉美水芙蓉 发表于 2022-5-20 07:06
@队长还没有看见呢？

队长会看到的

马黑黑 发表于 2022-5-20 13:03

根据队长试用的结果，重新做了修正

加林森 发表于 2022-5-20 13:30

醉美水芙蓉 发表于 2022-5-20 07:06
@队长还没有看见呢？

谢谢水芙蓉！

加林森 发表于 2022-5-20 13:30

马黑黑 发表于 2022-5-20 13:03
根据队长试用的结果，重新做了修正

谢谢老黑！{:4_191:}

小辣椒 发表于 2022-5-20 13:36

黑黑这个代码很通俗了，高手特棒~{:4_178:}

马黑黑 发表于 2022-5-20 18:05

小辣椒 发表于 2022-5-20 13:36
黑黑这个代码很通俗了，高手特棒~

早上发的时候有点急，可能存在一些错误，队长用了出问题就顺势改改，就用队长的代码

马黑黑 发表于 2022-5-20 18:07

加林森 发表于 2022-5-20 13:30
谢谢老黑！
不好意思呢，是我早上太忙，给的代码没测试好

加林森 发表于 2022-5-20 18:31

马黑黑 发表于 2022-5-20 18:07
不好意思呢，是我早上太忙，给的代码没测试好

好的好的。现在都正常了就好啊。

马黑黑 发表于 2022-5-20 19:08

加林森 发表于 2022-5-20 18:31
好的好的。现在都正常了就好啊。

{:5_108:}

加林森 发表于 2022-5-20 19:14

马黑黑 发表于 2022-5-20 19:08


{:5_108:}

红影 发表于 2022-5-20 21:53

马黑黑 发表于 2022-5-19 22:15
图片地址直接加入数组

嗯嗯，辛苦黑黑了，空了我也做一个去{:4_187:}

马黑黑 发表于 2022-5-20 23:40

红影 发表于 2022-5-20 21:53
嗯嗯，辛苦黑黑了，空了我也做一个去

{:4_190:}
页: [1]
查看完整版本: 孔雀舞改装版代码分享