利用 z-index 实现一个巧妙的动画

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情

我们先看下动画效果

代码链接

动画分解

1. 两个小球围绕中间的模糊球旋转
2. 小球斜右上动画时,在透明球的上面
3. 小球斜左下动画时,在透明球的下面

代码实现

html 部分

<div id="app">
  <span></span>
  <span></span>
  <span></span>
</div>

css部分

模糊透明小球的实现

关键属性:

• background: rgba(255, 255, 255, 0.05); // 确保背景有一定的透明度,才能看到模糊生效

• backdrop-filter: blur(22px); // 高斯模糊

• z-index: 2; // 实现环绕小球的上下位置的变化

旋转小球的实现

关键属性:

• position: absolute; // 让小球脱离文档流
• transform: translate(-100px, 100px); // 让小球位于左下角
• animation: anima 2s 0 ease-in-out infinite; // 确保动画可以反复运行 注意看0

下面是动画的实现部分

@keyframes anima{
 0% {
   transform: translate(-100px, 100px) scale(0.5);
   z-index: 3;
 }
 50% {
   transform: translate(100px, -100px scale(0.5));
   z-index: 3;
 }
 50.0001% {
   transform: translate(100px, -100px) scale(0.5);
   z-index: 1;
 }
 100% {
   transform: translate(-100px, 100px) scale(0.5);
   z-index: 1;
 }
}

0% 至 50% 小球斜右上,此时小球的 z-index: 3,是要大于透明球的 z-index: , 所以会在透明球的上面经过, 50.001% 至 100%,小球斜左下,这时小球的 z-index: 1,是小于透明球的 z-index: 2, 所以会在透明球的下面经过,并因为高斯模糊和透明效果,看到穿过的过程.

环绕的小球两个相差了1s,可以利用 animation-delay的特性来实现,把值写为负数,在上面的代码,可以看到环绕球的nimation-duration:2s,所以让另一个环绕球,提前在1s的位置开始, 第二个小球的动画实现,animation: anima 2s -1s ease-in-out infinite;

提示：允许负值，-1s 使动画马上开始，但跳过 1 秒进入动画。