我用 CSS3 实现了一个超炫的 3D 加载动画

2022年4月17日 261点热度 0人点赞 0条评论

今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果。这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱体依次波浪式地起伏,从而传递给用户“正在加载”的信息。

效果预览

图片

代码实现

HTML代码

HTML代码十分简单,一共有三类对象,一个是最外面的椭圆容器,一个是12个圆柱体,最后是“Loading”文本。

<div class="pl">
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__dot"></div>
 <div class="pl__text">Loading…</div>
</div>

CSS代码

CSS代码主要做三件事情:

首先是让最外面的椭圆容器呈现出内陷的3D视觉效果,这里用带了box-shadow属性:

.pl {
  box-shadow2em 0 2em rgba(0000.2) inset, -2em 0 2em rgba(2552552550.1) inset;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  letter-spacing0.1em;
  text-transform: uppercase;
  transformrotateX(30degrotateZ(45deg);
  width15em;
  height15em;
}

然后是让12个<div>元素成为3D效果的小圆圈,这里主要用到了box-shadowborder-radius属性:

.pl__dot {
  border-radius50%;
}
.pl__dot {
  animation-name: shadow;
  box-shadow0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0000.5);
  topcalc(50% - 0.75em);
  leftcalc(50% - 0.75em);
  width1.5em;
  height1.5em;
}
.pl__dot.pl__dot:before.pl__dot:after {
  animation-duration2s;
  animation-iteration-count: infinite;
  position: absolute;
}
.pl__dot:before.pl__dot:after {
  content"";
  display: block;
  left0;
  width: inherit;
  transition: background-color var(--trans-dur);
}
.pl__dot:before {
  animation-name: pushInOut1;
  background-colorvar(--bg);
  border-radius: inherit;
  box-shadow0.05em 0 0.1em rgba(2552552550.2) inset;
  height: inherit;
  z-index1;
}
.pl__dot:after {
  animation-name: pushInOut2;
  background-colorvar(--primary1);
  border-radius0.75em;
  box-shadow0.1em 0.3em 0.2em rgba(2552552550.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0000.3) inset;
  bottom0;
  clip-pathpolygon(0 75%100% 75%100% 100%0 100%);
  height3em;
  transformrotate(-45deg);
  transform-origin50% 2.25em;
}

最后一步就是让12个小圆圈按不同是时间间隔旋转不同的角度,从而形成波浪式的起伏效果。

.pl__dot:nth-child(1) {
  transformrotate(0degtranslateX(5emrotate(0deg);
  z-index5;
}
.pl__dot:nth-child(1).pl__dot:nth-child(1):before.pl__dot:nth-child(1):after {
  animation-delay0s;
}
.pl__dot:nth-child(2) {
  transformrotate(-30degtranslateX(5emrotate(30deg);
  z-index4;
}
.pl__dot:nth-child(2).pl__dot:nth-child(2):before.pl__dot:nth-child(2):after {
  animation-delay: -0.1666666667s;
}
.pl__dot:nth-child(3) {
  transformrotate(-60degtranslateX(5emrotate(60deg);
  z-index3;
}
.pl__dot:nth-child(3).pl__dot:nth-child(3):before.pl__dot:nth-child(3):after {
  animation-delay: -0.3333333333s;
}
.pl__dot:nth-child(4) {
  transformrotate(-90degtranslateX(5emrotate(90deg);
  z-index2;
}
.pl__dot:nth-child(4).pl__dot:nth-child(4):before.pl__dot:nth-child(4):after {
  animation-delay: -0.5s;
}
.pl__dot:nth-child(5) {
  transformrotate(-120degtranslateX(5emrotate(120deg);
  z-index1;
}
.pl__dot:nth-child(5).pl__dot:nth-child(5):before.pl__dot:nth-child(5):after {
  animation-delay: -0.6666666667s;
}
.pl__dot:nth-child(6) {
  transformrotate(-150degtranslateX(5emrotate(150deg);
  z-index1;
}
.pl__dot:nth-child(6).pl__dot:nth-child(6):before.pl__dot:nth-child(6):after {
  animation-delay: -0.8333333333s;
}
.pl__dot:nth-child(7) {
  transformrotate(-180degtranslateX(5emrotate(180deg);
  z-index2;
}
.pl__dot:nth-child(7).pl__dot:nth-child(7):before.pl__dot:nth-child(7):after {
  animation-delay: -1s;
}
.pl__dot:nth-child(8) {
  transformrotate(-210degtranslateX(5emrotate(210deg);
  z-index3;
}
.pl__dot:nth-child(8).pl__dot:nth-child(8):before.pl__dot:nth-child(8):after {
  animation-delay: -1.1666666667s;
}
.pl__dot:nth-child(9) {
  transformrotate(-240degtranslateX(5emrotate(240deg);
  z-index4;
}
.pl__dot:nth-child(9).pl__dot:nth-child(9):before.pl__dot:nth-child(9):after {
  animation-delay: -1.3333333333s;
}
.pl__dot:nth-child(10) {
  transformrotate(-270degtranslateX(5emrotate(270deg);
  z-index5;
}
.pl__dot:nth-child(10).pl__dot:nth-child(10):before.pl__dot:nth-child(10):after {
  animation-delay: -1.5s;
}
.pl__dot:nth-child(11) {
  transformrotate(-300degtranslateX(5emrotate(300deg);
  z-index6;
}
.pl__dot:nth-child(11).pl__dot:nth-child(11):before.pl__dot:nth-child(11):after {
  animation-delay: -1.6666666667s;
}
.pl__dot:nth-child(12) {
  transformrotate(-330degtranslateX(5emrotate(330deg);
  z-index6;
}
.pl__dot:nth-child(12).pl__dot:nth-child(12):before.pl__dot:nth-child(12):after {
  animation-delay: -1.8333333333s;
}

另外,在12个小圆圈渐进式地变成小圆柱体的时候,圆柱体的阴影和高度变化运用到了下面的CSS3动画:

@keyframes shadow {
  from {
    animation-timing-function: ease-in;
    box-shadow0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0000.3);
  }
  25% {
    animation-timing-function: ease-out;
    box-shadow0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0000.5);
  }
  50%, to {
    box-shadow0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0000.3);
  }
}
@keyframes pushInOut1 {
  from {
    animation-timing-function: ease-in;
    background-colorvar(--bg);
    transformtranslate(00);
  }
  25% {
    animation-timing-function: ease-out;
    background-colorvar(--primary2);
    transformtranslate(-71%, -71%);
  }
  50%, to {
    background-colorvar(--bg);
    transformtranslate(00);
  }
}
@keyframes pushInOut2 {
  from {
    animation-timing-function: ease-in;
    background-colorvar(--bg);
    clip-pathpolygon(0 75%100% 75%100% 100%0 100%);
  }
  25% {
    animation-timing-function: ease-out;
    background-colorvar(--primary1);
    clip-pathpolygon(0 25%100% 25%100% 100%0 100%);
  }
  50%, to {
    background-colorvar(--bg);
    clip-pathpolygon(0 75%100% 75%100% 100%0 100%);
  }
}

到这里,我们就完整地实现了这个纯CSS3 3D加载动画,文章最后也将源码献给大家。

源码下载

完整的代码我已经整理出了一个源码包,供大家下载学习。

长按下方二维码关注我的公众号,回复关键字:3006,即可获取源码下载链接。

图片

代码仅供参考和学习,请不要用于商业用途。

最后总结

这个CSS3 3D Loading加载动画主要运用了CSS3的动画帧属性、box-shadow属性以及animation-delay属性,希望本文对你的开发有所帮助。

74820我用 CSS3 实现了一个超炫的 3D 加载动画

这个人很懒,什么都没留下

文章评论