《孔雀舞》代码解释
本帖最后由 马黑黑 于 2022-5-17 22:44 编辑 <br /><br />《孔雀舞》帖子地址：<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=59575&extra=page%3D1" target="_blank">https://www.huachaowang.com/foru ... 9575&extra=page%3D1</a><br><br>HTML是两层结构，代码如下：
<div><br></div><div><div><font color="#8b0000"><div class="outerbox"></font></div><div><font color="#8b0000"><span style="white-space:pre"> </span><div class="innerbox"></div></font></div><div><font color="#8b0000"></div></font></div></div><div><br></div><div>很简洁，没什么可说的，要实现的样式与功能，通过CSS和JS来完成。先说说CSS：</div><div><br></div><div><div><font color="#8b0000"><style></font></div><div><font color="#8b0000">.outerbox {</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>position: relative;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>left: -242px;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>display: flex;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>justify-content: center;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>align-items: center;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>width: 1080px;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>height: 666px;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>background: #888 url('https://638183.freep.cn/638183/t22/51/peacock.jpg') no-repeat center/cover;;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>box-shadow: 2px 2px 8px rgba(0,0,0,.95);</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>perspective: 3000px;</font></div><div><font color="#8b0000">}</font></div><div><font color="#8b0000">.innerbox {</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>background: #666;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>box-shadow: 2px 2px 6px rgba(0,0,0,.85);</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>transform-style: preserve-3d;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>animation: flyout 6s linear infinite alternate;</font></div><div><font color="#8b0000">}</font></div><div><font color="#8b0000">@keyframes flyout {</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>0% { transform: rotate(0turn); width: 1px; height: 1px; }</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>80%, 100% { transform: rotate(2turn); width: 600px; height: 600px; }</font></div><div><font color="#8b0000">}</font></div><div><font color="#8b0000"></style></font></div></div><div><br></div><div>父元素 .outerbox 使用弹性布局并令子元素水平、垂直两个方向居中，这样会给子元素的运动提供一个完美的场所。景深要有，设为3000px，令帖子的整体效果有3d观感。</div><div><br></div><div>子元素 .innerbox 设定 transform-style，配合父元素的景深设置展示3d效果。它的背景图片留给JS设置。animation 动画设为 6 秒，循环（infinite）、反向（alternate）运行。</div><div><br></div><div>关键帧动画，flyout，0% 时旋转 0 圈，大小为 1 个像素；80% 和 100% 时动画的状态一样，旋转两圈，大小变为600*600。之所以80%和100%之时状态一样，是为了让图片推到最前方时停留一下下。</div><div><br></div><div>下面说说JS：</div><div><br></div><div><div><font color="#8b0000"><script></font></div><div><font color="#8b0000"><br></font></div><div><font color="#8b0000">let picAr = Array.from({length:13}, (v,k) => k + 1);</font></div><div><font color="#8b0000">let idx = 0;</font></div><div><font color="#8b0000">let outer = document.querySelector('.outerbox');</font></div><div><font color="#8b0000">let inner = document.querySelector('.innerbox');</font></div><div><font color="#8b0000">let aud = document.createElement('iframe');</font></div><div><font color="#8b0000">aud.src = 'https://music.163.com/outchain/player?type=2&id=1840766699&auto=1&height=66';</font></div><div><font color="#8b0000">aud.style.display = 'none';</font></div><div><font color="#8b0000">outer.appendChild(aud);</font></div><div><font color="#8b0000">setBgImg();</font></div><div><font color="#8b0000">setInterval(setBgImg, 12000);</font></div><div><font color="#8b0000"><br></font></div><div><font color="#8b0000">function setBgImg(){</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>inner.style = `background: url('https://638183.freep.cn/638183/t22/51/${picAr}.jpg') no-repeat center/cover`;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>idx += 1;</font></div><div><font color="#8b0000"><span style="white-space:pre"> </span>if(idx >= picAr.length) idx = 0;</font></div><div><font color="#8b0000">}</font></div><div><font color="#8b0000"><br></font></div><div><font color="#8b0000"></script></font></div></div><div><br></div><div>第一行，快捷构建一个有13个元素的数组 picAr，这是为了节省代码量，前提是图片的命名规则是 1.jpg、2.jpg、……、13.jpg，然后在函数 setBgImg() 里加入url的前面部分和后缀得出完整图片地址。</div><div><br></div><div>变量 idx 是图片数组的标识，从0开始，运行中每一次加1，加到 13 时变回0，都在 setBgImg() 函数里完成计算。</div><div><br></div><div>定时器 setInterval 是少不了的，它结合并配合 CSS 的关键帧动画 flyout，以 flyout 被子元素的 animation 调用的周期运行时长为依据，6*2 = 12（秒），这是关键所在。为什么是 6*2 ？因为animation有个参数 alternate，反向运行，同样会花一个周期时长的时间。</div> “前提是图片的命名规则是 1.jpg、2.jpg、……、”
可是很多地方上传后的地址并不是和命名一致的呢{:4_173:} 红影 发表于 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}.jpg') no-repeat center/cover`;
改为，
inner.style = `background: url('${picAr}') no-repeat center/cover`; 马黑黑 发表于 2022-5-17 23:51
那就需要将地址一个一个的建立数组。当然还可以有讨巧的做法。例如，图片网址假设如此：
相同部分/图 ...
嗯嗯，你这个就是这样做的吧。 红影 发表于 2022-5-19 12:40
嗯嗯，你这个就是这样做的吧。
差不多 马黑黑 发表于 2022-5-19 12:40
差不多
这个效果很漂亮{:4_187:} 红影 发表于 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
谢谢黑黑老师！辛苦了，明天再来学习！
我在水吧贴出了修改码
页:
[1]