论坛 › 马黑黑教程专版 › CSS+JS: 子元素随机堆叠成大致的圆形

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

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

昨天 @小辣椒 提出一个想法：如何令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

<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: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轴参数），值越大，超越父元素区域的子元素就越多。

红影 发表于 2022-11-9 14:05

效果的确很圆呢。@小辣椒快来看{:4_187:}

马黑黑 发表于 2022-11-9 17:54

红影 发表于 2022-11-9 14:05
效果的确很圆呢。@小辣椒快来看

圆是一个大学问，我们的太极就是使用了圆的原理

小辣椒 发表于 2022-11-9 20:48

红影 发表于 2022-11-9 14:05
效果的确很圆呢。@小辣椒快来看

黑黑大神的，又一个效果，昨天的那个我都没有去琢磨透，黑黑速度太快了{:4_178:}

小辣椒 发表于 2022-11-9 20:48

马黑黑 发表于 2022-11-9 17:54
圆是一个大学问，我们的太极就是使用了圆的原理

黑黑神速的，不过我算到你今天有新的效果出来的{:4_170:}

马黑黑 发表于 2022-11-9 20:58

小辣椒 发表于 2022-11-9 20:48
黑黑神速的，不过我算到你今天有新的效果出来的

掐指一算就是准{:4_173:}

马黑黑 发表于 2022-11-9 20:59

小辣椒 发表于 2022-11-9 20:48
黑黑神速的，不过我算到你今天有新的效果出来的

还有这个地方你可以看看：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1772032&fromuid=7130

红影 发表于 2022-11-9 22:37

马黑黑 发表于 2022-11-9 17:54
圆是一个大学问，我们的太极就是使用了圆的原理

这个随机就能成圆，厉害{:4_204:}

马黑黑 发表于 2022-11-9 23:09

红影 发表于 2022-11-9 22:37
这个随机就能成圆，厉害

成圆的不是随机的

红影 发表于 2022-11-10 14:27

马黑黑 发表于 2022-11-9 23:09
成圆的不是随机的

是在圆里面的随机排布啊。

马黑黑 发表于 2022-11-10 17:57

红影 发表于 2022-11-10 14:27
是在圆里面的随机排布啊。

这说法倒也是

红影 发表于 2022-11-10 21:45

马黑黑 发表于 2022-11-10 17:57
这说法倒也是

我本来说的就是这个意思，没表达清楚{:4_173:}

马黑黑 发表于 2022-11-10 21:46

红影 发表于 2022-11-10 21:45
我本来说的就是这个意思，没表达清楚

鹅鹅鹅，明白明白

红影 发表于 2022-11-10 21:58

马黑黑 发表于 2022-11-10 21:46
鹅鹅鹅，明白明白

鹅明白了，鸭明白不{:4_173:}

马黑黑 发表于 2022-11-10 22:00

红影 发表于 2022-11-10 21:58
鹅明白了，鸭明白不

鸡也弄不懂

红影 发表于 2022-11-10 22:09

马黑黑 发表于 2022-11-10 22:00
鸡也弄不懂

知了说它知道了{:4_173:}

马黑黑 发表于 2022-11-10 22:11

红影 发表于 2022-11-10 22:09
知了说它知道了

它啥都知道

查看完整版本: CSS+JS: 子元素随机堆叠成大致的圆形