龙空技术网

纯CSS实现2个磁力小球往返运动的Loading特效 44/117

德育处主任pro 31

前言:

现时咱们对“css实现小球跳动”大体比较重视,大家都需要剖析一些“css实现小球跳动”的相关知识。那么小编同时在网上网罗了一些对于“css实现小球跳动””的相关资讯,希望各位老铁们能喜欢,同学们快快来学习一下吧!

这是一个使用纯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>

标签: #css实现小球跳动 #css小球