Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说纯CSS实现牛顿摆效果的Loading特效 24/117,希望能够帮助你!!!。

这是一个非常有趣的纯CSS实现的Loading特效，它由一个摆和两个球组成，摆会不断摆动，球会不断交替运动，给用户提供一个有趣的等待界面。这个特效使用了CSS的animation属性，通过动态变化来实现摆和球的运动效果。同时，在这个特效的实现过程中没有用到任何JavaScript，这有助于减少网站的加载时间，提升性能。

这个特效的设计非常巧妙，使用了牛顿摆的物理原理来展现球的运动轨迹，同时摆的摆动效果也非常流畅自然。整个特效的视觉效果非常出色，能够为用户提供一个愉悦的等待体验。

<div class="loading">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 40px;
  height: 10px;
}

.loading > div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.loading > div:first-child {
  transform: translateX(0%);
  animation: ball-newton-cradle-left 1s 0s ease-out infinite;
}

.loading > div:last-child {
  transform: translateX(0%);
  animation: ball-newton-cradle-right 1s 0s ease-out infinite;
}

.loading.la-sm {
  width: 20px;
  height: 4px;
}

.loading.la-sm > div {
  width: 4px;
  height: 4px;
}

.loading.la-2x {
  width: 80px;
  height: 20px;
}

.loading.la-2x > div {
  width: 20px;
  height: 20px;
}

.loading.la-3x {
  width: 120px;
  height: 30px;
}

.loading.la-3x > div {
  width: 30px;
  height: 30px;
}

@keyframes ball-newton-cradle-left {
  25% {
    transform: translateX(-100%);
    animation-timing-function: ease-in;
  }

  50% {
    transform: translateX(0%);
  }
}

@keyframes ball-newton-cradle-right {
  50% {
    transform: translateX(0%);
  }

  75% {
    transform: translateX(100%);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translateX(0%);
  }
}
</style>

如果您正在寻找一个简单而美观的加载动画，那么这个纯CSS实现的牛顿摆效果的Loading特效一定会是一个不错的选择。不仅可以提升网站的性能，还可以为用户提供一个有趣的等待界面。希望这个特效能够为您的网站增添一些活力和趣味性！

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。