涅槃重生左侧效果解释

马黑黑 · 发表于 2022-11-14 08:40

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

请访问《涅槃重生》查看效果，谢谢！

帖子左侧的效果，是帖子“动”的组成部分，它的实现思路是：布排N多个元素，通过 transform 的 rotate 和 translate 配合令各元素旋转、移位以达到一定规律的排列，再随机令元素中的某一个着色（着色功能由 audio 播放进度驱动）。

实现步骤：

一、CSS

① 要有一个父框，父框关键代码如下

#papa {
width: 1200px;
height: 800px;
display: grid;
place-items: center;
position: relative;
}

grid布局并令子元素绝对居中，这样在设定子元素的物理位置是省事：它们绝对居中，仅调整水平方向或垂直方向的位置，只需加一个 left 或 top 即可。相对定位，必须，这样才能约束绝对定位的子元素。

② 制定子元素基本样式

#papa > span {
position: absolute;
left: 300px;
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid red;
}

我们用 span 标签做特效的载体，作为 papa 的直系子元素，即第一代子元素。绝对定位，必须设置；left 定义了元素的初始位置，top不设置，自动垂直居中；宽高都是 40px；边框圆角为 8px，边框样式是 1px、实线、红色。

二、HTML代码：仅父框

<div id="papa"></div>

三、JS实现最终效果

① 生成N多子元素并细化细节

(function() {
let total = 100, rr = 700;
Array.from({length: total}).forEach((item, key) => {
item = document.createElement('span');
let num = rr * key / total;
if (num > rr / 2) num -= rr;
item.className = 'circle';
item.style.cssText += `
border-color: #${Math.random().toString(16).substr(-6)};
transform: rotate(${(360/total) * key}deg) translateY(${num}px);
`;
papa.appendChild(item);
});
})();

这是一个自执行函数，简单解释一下——

变量 total 是子元素数量，rr 是子元素分布的直径；

通过遍历 total 个元素，将其作为 span 标签追加到 papa 父元素中。其中的计算：

let num = rr * key / total; // translate平移的距离：rr除以total的平均数，根据元素索引key的变化而变化
if (num > rr / 2) num -= rr; // num超出直径的一半时就拿直径去减num
//下面追加给子元素的样式细节，有随机边框颜色、transform的角度等计算，translate的值已有 num 计算好
border-color: #${Math.random().toString(16).substr(-6)};
transform: rotate(${(360/total) * key}deg) translateY(${num}px);

最后给出完整代码：

<style>
#papa {
width: 1200px;
height: 800px;
display: grid;
place-items: center;
position: relative;
}
#papa > span {
position: absolute;
left: 300px;
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid red;
}
</style>
<div id="papa"></div>
<script>
(function() {
let total = 100,
rr = 700;
Array.from({
length: total
})
.forEach((item, key) => {
item = document.createElement('span');
let num = rr * key / total;
if (num > rr / 2) num -= rr;
item.className = 'circle';
item.style.cssText += `border-color: #${Math.random().toString(16).substr(-6)};transform: rotate(${(360/total) * key}deg) translateY(${num}px);`;
papa.appendChild(item);
});
})();
</script>

复制代码

马黑黑 · 发表于 2022-11-14 08:41

马黑黑 · 发表于 2022-11-14 08:53

本帖最后由马黑黑于 2022-11-14 08:55 编辑

以上，实现了外观功能，我们还需要一个自定义函数让子元素中某一个上色：

let lastcircle = 0; //上一个着色的子元素

let changeBgColor = () => {
      let circles = document.querySelectorAll('.circle'); // 声明子元素的操作句柄
      circles[lastcircle].style.background = 'none'; // 将上一个着色的子元素还原背景色为无
      lastcircle = Math.round(Math.random() * (circles.length - 1)); //随机获得将要着色的子元素索引
      circles[lastcircle].style.background = 'red'; // 给子元素着色
};

子元素索引随机获取，使用到 Math.round() 数学方法，四舍五入。Math.random() 得到的是 0.0 至 0.999... 的随机数，它乘上  (circles.length - 1) 即子元素总数减一得到的是带小数点的浮点数，把整个算式用 Math.round() 处理后得到整数，即 0 至（total-1）的数字，对应的是子元素的索引号。

然后上述自定义函数 changeBgColor() 由某个机制（比如audio的播放进度）触发即可随机给某一个子元素上色：

aud.addEventListener('timeupdate', () => {
      //其他代码
      changeBgColor();
      //其他代码
});