CSS+JS: 子元素随机堆叠成大致的圆形

马黑黑 · 发表于 2022-11-9 12:15

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

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

x

昨天 @小辣椒提出一个想法：如何令CSS+JS粒子集中在一个圆形区域里。其实，之前我们有过这方面的探讨，这里再以诸多个三角形堆叠为例，展示一下实现的方法。

思路是酱紫：

① 作为子元素的N多个三角形全部定位在相同的位置，父元素需要定位（绝对或相对都可以），子元素即三角形需要绝对定位。然后，依据 transform: rotate() translate/3d() 可以令子元素绕圆分布的原理，通过随机旋转角度、位移距离得到随机绕圆分布的效果，这样，它们的随机堆叠分布大致就是围成圆形的。

② 父元素设置为圆形形态，设置 overflow: hidden 防止溢出，则上述的三角形子元素超出圆形区域的部分被切掉不可见，圆的效果就会更明显。

下面的示例很简单的：mama 是 papa 的子元素，mama设置为圆形外观，带N多个设置为三角形的子元素，这些子元素在CSS里有普通的设置，在JS里做更详尽的设定，效果放在下楼：

<style>
#papa {
margin: 120px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
display: grid;
place-items: center;
background: gray;
box-shadow: 3px 3px 20px #000;
position: relative;
}
#mama {
position: absolute;
width: 400px;
height: 400px;
display: grid;
place-items: center;
border-radius: 50%;
overflow: hidden;
perspective: 1000px;
}
#mama > span {
position: absolute;
width: 0;
height: 0;
opacity: .75;
transform-style: preserve-3d;
}
</style>
<div id="papa">
<div id="mama"></div>
</div>
<script>
for(j=0; j<100; j++) {
let span = document.createElement('span');
let ww = mama.offsetWidth / 2;
span.style.cssText = `
border: ${ww/5}px solid;
border-color: transparent transparent #${Math.random().toString(16).substr(-6)} transparent;
transform: rotate(${Math.random()*360}deg) translate3d(${Math.random()*(ww-80)}px, ${Math.random()*(ww-80)}px, ${Math.random()*300}px);
`;
mama.appendChild(span);
}
</script>

复制代码

马黑黑 · 发表于 2022-11-9 12:15

马黑黑 · 发表于 2022-11-9 12:16

二楼的效果，和 css-doodle 的一个实例接近但不同，不过如果需要我们也可以比较完美的模拟它

马黑黑 · 发表于 2022-11-9 12:44

三角形转换运动用了如下语句：

transform: rotate(${Math.random()*360}deg) translate3d(${Math.random()*(ww-80)}px, ${Math.random()*(ww-80)}px, ${Math.random()*300}px);

这里，rotate 角度的大小，translate3d 的三个参数值，都会综合影响三角形的位置，要设置好，尤其 translate3d 的最后一个参数（Z轴参数），值越大，超越父元素区域的子元素就越多。