CSS+JS：3d粒子一例

马黑黑 · 发表于 2022-11-4 20:12

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

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

x

本帖使用到CSS的3d转换知识点：

一、父元素声明景深：

perspective: 1000px;

本例景深设置为 1000px，可以是其他数值。景深针对Z轴，即眼睛和屏幕间的方向的延伸，是物体对象在这个方向上从屏幕的表面到纵深方向的距离，该距离越大，景深就越细腻。一般会根据屏幕分辨率定值。

二、子元素声明使用3d：

transform-style: preserve-3d;

三、3d关键帧动画：

@keyframes move {
   to { transform: rotate(0) translate3d(0, 0, 0); }
}

关键帧动画设计里，我们使用 transform 的两个转换属性 rotate（旋转）和 translate3d（3d移位），当 rotate 放前、translate或translate3d 放后，会产生物体绕圈圈旋转的效果，我们只需把要移动的物体对象定位就好，比如定位在父元素的中心点。这里，大家可能觉得奇怪，rotate 和 translate3d 咋都参数为 0 呢？这与本例设计有关：我们事先旋转了物体对象，然后通过关键帧动画恢复它们的初始状况。看完整的CSS和HTML代码就能理解这个道理，代码里有该有的注释：

<style>
/* 父元素 即帖子外框 */
#papa {
   margin: auto;
   /* 下面两句使用网格布局快速定位子元素绝对居中 */
   display: grid;
   place-items: center;
   width: 1024px;
   height: 640px;
   background: #000;
   box-shadow: 3px 3px 20px #000;
   perspective: 1000px; /* 景深设置 */
   overflow: hidden; /* 不显示溢出内容 */
   position: relative; /* 父元素相对定位 */
}
/* 子元素 即运动对象*/
.stars {
   position: absolute; /* 子元素绝对定位 */
   width: 3px; /* 宽度 */
   height: 3px; /* 高度 */
   border-radius: 50%; /* 圆形 */
   background: silver; /* 初始背景色 */
   transform-style: preserve-3d; /* 以 3d 形态展现 */
}
/* 关键帧动画 ：恢复初始形态（旋转与3d移位）*/
@keyframes move {
   to { transform: rotate(0) translate3d(0, 0, 0); }
}
</style>

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

下面，也是最后一步，我们要用 JS 写若干个 class="stars" 的 span 标签，比如 500 个。我们将在 JS里赋予它们上面 .stars 选择器或许包含或许不包含的属性（包含的，CSS的原始设定会被覆盖），我们用一个 for 语句便可完成这个工作：

<script>
for(j=0; j<500; j++) {
   let ele = document.createElement('span');
   ele.className = 'stars';
   ele.style.cssText += `
      background: hsl(${Math.random() * 255}, ${Math.random() * 50 + 40}%,${Math.random() * 70 + 20}%);
      transform: rotate(${Math.random() * 720}deg) translate3d(${Math.random() * 500}px,${Math.random() * 300}px,${Math.random() * 1000}px);
      animation: move 30s infinite ${-10 - Math.random() * 20}s linear;
   `;
   papa.appendChild(ele);
}
</script>

for语句中，我们创建了 500个 span 标签并追加到 id="papa" 的父元素中，这些 span 标签 class 名为 stars，便能使用 CSS 选择器 .stars 里定义的属性，同时我们添加了新的属性，也修改了 .stars 选择器的部分属性，通过 ele.style.cssText += `...`; 来实现。符号 `` 里面的内容中，我们设定了背景色 background 是随机的 hsla 值，transform 变换则是，先随机旋转（rotate），再随机3d移位（translate3d）。每一个 span 标签因为随机的设置，它们的初始形态，如旋转多少度、移位到哪里，都是不同的，然后通过 animation 调用关键帧动画 move，加入一个延时机制，便可创建出令人惊艳的画面。效果请看二楼。

补充说明一下：关键帧动画中使用的是 translate3d，其中的第三个参数针对 Z轴，该参数随机获取，本例取值范围在 0 - 1000px 之间，值小时对象大，值大时对象小。

马黑黑 · 发表于 2022-11-4 20:13

马黑黑 · 发表于 2022-11-4 20:18

全部代码

<style>
#papa {
margin: auto;
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: #000;
box-shadow: 3px 3px 20px #000;
perspective: 1000px;
overflow: hidden;
position: relative;
z-index: 1;
}
.stars {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: silver;
transform-style: preserve-3d;
}
@keyframes move {
to { transform: rotate(0) translate3d(0, 0, 0); }
}
</style>
<div id="papa">
</div>
<script>
for(j=0; j<500; j++) {
let ele = document.createElement('span');
ele.className = 'stars';
ele.style.cssText += `
background: hsl(${Math.random() * 255}, ${Math.random() * 50 + 40}%,${Math.random() * 70 + 20}%);
transform: rotate(${Math.random() * 720}deg) translate3d(${Math.random() * 500}px,${Math.random() * 300}px,${Math.random() * 1000}px);
animation: move 30s infinite ${-10 - Math.random() * 20}s linear;
`;
papa.appendChild(ele);
}
</script>