这篇文章介绍了如何使用纯CSS实现2个磁力小球循环运动的Loading特效。这个特效可以用在网页的加载过程中，使用户等待的时间更加有趣和轻松。
使用CSS3的@keyframes规则，通过改变每个小球的位置，来实现循环运动的效果。同时，使用了CSS的transform属性，控制小球的位置。
实现步骤- 创建一个HTML文件，并在文件中添加一个div容器，用于包含2个磁力小球。
- 使用CSS对div容器进行样式设置，使其居中并设置宽高。
- 创建2个div元素，用于表示2个小球，并对其进行样式设置，如设置宽高、背景颜色等。
- 使用CSS3的@keyframes规则，对每个小球设置循环运动的动画效果。
- 使用CSS的transform属性，控制小球的位置和大小。
以下是实现该Loading特效的HTML和CSS代码：
<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-effect 0.7s 0s infinite linear;
}
.loading > div:last-child {
animation: ball-zag-effect 0.7s 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-effect {
0% {
transform: translate(0, 0);
}
33% {
transform: translate(-75%, -150%);
}
66% {
transform: translate(75%, -150%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes ball-zag-effect {
0% {
transform: translate(0, 0);
}
33% {
transform: translate(75%, 150%);
}
66% {
transform: translate(-75%, 150%);
}
100% {
transform: translate(0, 0);
}
}
</style>,
