弹跳小球加载

效果演示

实现了一个加载动画，可以用来显示页面正在加载中的状态。具体来说，它使用了CSS的动画和变换来实现一个弹跳的圆圈和一个向右移动的线条。当页面加载完成后，这个动画会自动消失。

Code

<div class="loader">div>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #212121;
}

.loader {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 0 auto;
}

.loader:before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #2a9d8f;
    animation: loading-bounce 0.5s ease-in-out infinite alternate;
}

.loader:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 7px;
    width: 45px;
    border-radius: 4px;
    box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
    animation: loading-step 1s ease-in-out infinite;
}

@keyframes loading-bounce {
    0% {
        transform: scale(1, 0.7);
    }

    40% {
        transform: scale(0.8, 1.2);
    }

    60% {
        transform: scale(1, 1);
    }

    100% {
        bottom: 140px;
    }
}

@keyframes loading-step {
    0% {
        box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
            0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2;
    }

    100% {
        box-shadow: 0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2,
            -70px 90px 0 rgba(0, 0, 0, 0);
    }
}

实现思路拆分

body {
  height: 100vh; /* 设置body高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置flex容器中内容的水平居中对齐 */
  align-items: center; /* 设置flex容器中内容的垂直居中对齐 */
  background-color: #212121; /* 设置背景颜色为深灰色 */
}

这段代码设置了页面的基本样式，包括高度、布局方式、背景颜色等。

.loader {
  position: relative; /* 设置loader元素为相对定位 */
  width: 120px; /* 设置loader元素的宽度为120px */
  height: 90px; /* 设置loader元素的高度为90px */
  margin: 0 auto; /* 设置loader元素的水平居中对齐 */
}

这段代码设置了loader元素的样式，包括位置、大小、边距等。

.loader:before {
  content: ""; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  bottom: 30px; /* 设置伪元素距离底部的距离为30px */
  left: 50px; /* 设置伪元素距离左侧的距离为50px */
  height: 30px; /* 设置伪元素的高度为30px */
  width: 30px; /* 设置伪元素的宽度为30px */
  border-radius: 50%; /* 设置伪元素的圆角半径为50% */
  background: #2a9d8f; /* 设置伪元素的背景颜色为绿色 */
  animation: loading-bounce 0.5s ease-in-out infinite alternate; /* 设置伪元素的动画效果 */
}

这段代码设置了loader元素的伪元素的样式，包括位置、大小、圆角半径、背景颜色和动画效果等。

.loader:after {
  content: ""; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  right: 0; /* 设置伪元素距离右侧的距离为0 */
  top: 0; /* 设置伪元素距离顶部的距离为0 */
  height: 7px; /* 设置伪元素的高度为7px */
  width: 45px; /* 设置伪元素的宽度为45px */
  border-radius: 4px; /* 设置伪元素的圆角半径为4px */
  box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; /* 设置伪元素的阴影效果 */
  animation: loading-step 1s ease-in-out infinite; /* 设置伪元素的动画效果 */
}

这段代码设置了loader元素的另一个伪元素的样式，包括位置、大小、圆角半径、阴影效果和动画效果等。

@keyframes loading-bounce {
  0% {
    transform: scale(1, 0.7); /* 设置伪元素在动画开始时的缩放比例 */
  }

  40% {
    transform: scale(0.8, 1.2); /* 设置伪元素在动画进行到一半时的缩放比例 */
  }

  60% {
    transform: scale(1, 1); /* 设置伪元素在动画结束时的缩放比例 */
  }

  100% {
    bottom: 140px; /* 设置伪元素在动画结束后的底部距离 */
  }
}

这段代码设置了loader元素的伪元素的动画效果，包括缩放比例和底部距离等。

@keyframes loading-step {
  0% {
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
      0 10px 0 #f2f2f2,
      -35px 50px 0 #f2f2f2,
      -70px 90px 0 #f2f2f2; /* 设置伪元素在动画开始时的阴影效果 */
  }

  100% {
    box-shadow: 0 10px 0 #f2f2f2,
      -35px 50px 0 #f2f2f2,
      -70px 90px 0 #f2f2f2,
      -70px 90px 0 rgba(0, 0, 0, 0); /* 设置伪元素在动画结束时的阴影效果 */
  }
}

这段代码设置了loader元素的伪元素的动画效果，包括阴影效果。具体来说，它使用了CSS的box-shadow属性来设置伪元素的阴影效果，包括四个阴影层次，每个阴影层次的位置、颜色和模糊半径等属性。在动画开始时，伪元素的阴影效果为四个黑色半透明的阴影层次，从左上角到右下角依次变为灰色半透明的阴影层次；在动画结束时，伪元素的阴影效果为四个灰色半透明的阴影层次，从右上角到左下角依次变为黑色半透明的阴影层次。这样可以实现一个向右移动的线条的效果。