这是一个使用纯CSS实现的Loading特效，它由两个磁力小球组成，这两个小球会在一个弹性框内往返运动，看起来非常有趣和生动。这个特效可以用于各种网页设计中，为用户提供更好的体验。
要实现这个特效，首先需要定义一个弹性框，然后在这个框内创建两个小球，并使用CSS动画来控制它们的运动。具体实现步骤如下：
- 定义弹性框：使用CSS定义一个具有弹性效果的框，可以使用flex布局或者grid布局来实现
- 控制小球运动：使用CSS动画来控制小球的运动，可以使用@keyframes关键字来定义动画，再将动画应用到小球上。需要注意的是，小球的运动应该是往返的，即从一个端点到另一个端点，然后再返回原来的位置。
通过以上步骤，我们就可以实现一个磁力小球往返运动的Loading特效了。可以根据实际需要进行样式的调整和优化，以达到更好的效果。
<div class="loading">
<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 {
position: relative;
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
border-radius: 100%;
}
.loading > div:first-child {
animation: ball-zig-deflect 1.5s 0s infinite linear;
}
.loading > div:last-child {
animation: ball-zag-deflect 1.5s 0s infinite linear;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-top: -2px;
margin-left: -2px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
}
@keyframes ball-zig-deflect {
17% {
transform: translate(-80%, -160%);
}
34% {
transform: translate(80%, -160%);
}
50% {
transform: translate(0, 0);
}
67% {
transform: translate(80%, -160%);
}
84% {
transform: translate(-80%, -160%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes ball-zag-deflect {
17% {
transform: translate(80%, 160%);
}
34% {
transform: translate(-80%, 160%);
}
50% {
transform: translate(0, 0);
}
67% {
transform: translate(-80%, 160%);
}
84% {
transform: translate(80%, 160%);
}
100% {
transform: translate(0, 0);
}
}
</style>
