9

css3加载动画 - 好看的loading效果的实现

 3 years ago
source link: https://www.fly63.com/article/detial/11184
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
更新日期: 2022-02-17阅读量: 194标签: 加载分享

扫一扫分享

loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。

以前大部分web开发加载(loading)特效是采用gif图片形式展现，随着html5+css3技术的成熟，纯CSS3版本Loading加载动画效果已经可以比拟gif动画效果。

通过css3实现loading动画，主要用到的属性：

@keyframes：用于定义动画
animation：用于使用动画

代码如下

实现上述效果，我们首先定义一个div容器，里面包含4个空的div，然后定义rotate旋转的动画，对每个子div设置动画延迟进行实现。

<div class="load_3">
	<div></div><div></div><div></div><div></div>
</div>

<style>
.load_3 {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.load_3 div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #61E8EA;
  border-radius: 50%;
  animation: load_3 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #61E8EA transparent transparent transparent;
}
.load_3 div:nth-child(1) {
  animation-delay: -0.45s;
}
.load_3 div:nth-child(2) {
  animation-delay: -0.3s;
}
.load_3 div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes load_3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

工具推荐

该工具共20多种不同的loading效果，全部使用animation帧动画制作而成。这些特效代码简洁，效果炫酷，非常值得学习借鉴。

地址：点击进入

链接: https://www.fly63.com/article/detial/11184


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK