《孔雀舞》代码解释

马黑黑

《孔雀舞》帖子地址：https://www.huachaowang.com/foru ... 9575&extra=page%3D1

HTML是两层结构，代码如下：

<div class="outerbox">

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

</div>

很简洁，没什么可说的，要实现的样式与功能，通过CSS和JS来完成。先说说CSS：

<style>

.outerbox {

position: relative;

left: -242px;

display: flex;

justify-content: center;

align-items: center;

width: 1080px;

height: 666px;

background: #888 url('https://638183.freep.cn/638183/t22/51/peacock.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>

父元素 .outerbox 使用弹性布局并令子元素水平、垂直两个方向居中，这样会给子元素的运动提供一个完美的场所。景深要有，设为3000px，令帖子的整体效果有3d观感。

子元素 .innerbox 设定 transform-style，配合父元素的景深设置展示3d效果。它的背景图片留给JS设置。animation 动画设为 6 秒，循环（infinite）、反向（alternate）运行。

关键帧动画，flyout，0% 时旋转 0 圈，大小为 1 个像素；80% 和 100% 时动画的状态一样，旋转两圈，大小变为600*600。之所以80%和100%之时状态一样，是为了让图片推到最前方时停留一下下。

下面说说JS：

<script>

let picAr = Array.from({length:13}, (v,k) => k + 1);

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=1840766699&auto=1&height=66';

aud.style.display = 'none';

outer.appendChild(aud);

setBgImg();

setInterval(setBgImg, 12000);

function setBgImg(){

inner.style = `background: url('https://638183.freep.cn/638183/t22/51/${picAr[idx]}.jpg') no-repeat center/cover`;

idx += 1;

if(idx >= picAr.length) idx = 0;

}

</script>

第一行，快捷构建一个有13个元素的数组 picAr，这是为了节省代码量，前提是图片的命名规则是 1.jpg、2.jpg、……、13.jpg，然后在函数 setBgImg() 里加入url的前面部分和后缀得出完整图片地址。

变量 idx 是图片数组的标识，从0开始，运行中每一次加1，加到 13 时变回0，都在 setBgImg() 函数里完成计算。

定时器 setInterval 是少不了的，它结合并配合 CSS 的关键帧动画 flyout，以 flyout 被子元素的 animation 调用的周期运行时长为依据，6*2 = 12（秒），这是关键所在。为什么是 6*2 ？因为animation有个参数 alternate，反向运行，同样会花一个周期时长的时间。

红影

“前提是图片的命名规则是 1.jpg、2.jpg、……、”
可是很多地方上传后的地址并不是和命名一致的呢

马黑黑

红影 发表于 2022-5-17 22:59
“前提是图片的命名规则是 1.jpg、2.jpg、……、”
可是很多地方上传后的地址并不是和命名一致的呢{:4_173 ...

那就需要将地址一个一个的建立数组。当然还可以有讨巧的做法。例如，图片网址假设如此：

相同部分/图片1.jpg
相同部分/图片2.jpg
…………
相同部分/图片n.jpg

则可以这样建立数组：

picAr = ['图片1', '图片2','…', '图片n' ];

后面在函数 setBgImg() 中补全相同部分和后缀。

加林森

来学习

马黑黑

马黑黑 发表于 2022-5-17 23:51
那就需要将地址一个一个的建立数组。当然还可以有讨巧的做法。例如，图片网址假设如此：

相同部分/图 ...

举例说明一下。先声明 图片url数组并赋值：

let picAr = [
  '图片1完整地址',
  '图片2完整地址',
  '.......',
  '图片N完整地址'
];

下一步，也是最后一步，将函数 setBgImg() 的 下面这句，

inner.style = `background: url('https://638183.freep.cn/638183/t22/51/${picAr[idx]}.jpg') no-repeat center/cover`;

改为，

inner.style = `background: url('${picAr[idx]}') no-repeat center/cover`;

红影

马黑黑 发表于 2022-5-17 23:51
那就需要将地址一个一个的建立数组。当然还可以有讨巧的做法。例如，图片网址假设如此：

相同部分/图 ...

嗯嗯，你这个就是这样做的吧。

马黑黑

红影 发表于 2022-5-19 12:40
嗯嗯，你这个就是这样做的吧。

差不多

红影

马黑黑 发表于 2022-5-19 12:40
差不多

这个效果很漂亮

马黑黑

红影 发表于 2022-5-19 20:38
这个效果很漂亮

过得去

马黑黑

醉美水芙蓉 发表于 2022-5-19 20:58
https://638183.freep.cn/638183/t22/51/${picAr}.jpg这个最关键的一步没有学会，太难了！

链接打不开

马黑黑

醉美水芙蓉 发表于 2022-5-19 21:41
这个是老师教程里的！

额，可是你的链接不对

马黑黑

醉美水芙蓉 发表于 2022-5-19 21:46
黑黑老师中间这么多图怎么做出来的？有点难度？

好像不能，关键是JS里给出图片地址，用数组方式，我把代码再改改，套用起来就方便了

马黑黑

醉美水芙蓉 发表于 2022-5-19 21:52
谢谢黑黑老师！辛苦了，明天再来学习！

我在水吧贴出了修改码