• 登录
社交账号登录
扫描微信二维码 扫描微信公众号
精彩与您分享

了解一下纯CSS实现的加载动画项目SpinKit页面加载

小秋同学 收藏 160 2020-10-20 11:02:15

不会做加载动画?了解一下纯CSS实现的加载动画项目SpinKit啊!


有时候我们在做项目的时候会加入一些动画来表示正在加载,正在运行等状态。

对于我这种野路子而言,完全自己写一套动画是绝对不可能的,于是就找到了这个叫做SpinKit的项目。

SpinKit提供了多种loading动画效果,它使用硬件加速创建平滑的CSS动画,你也可以轻松定制你需要的动画效果 。

SpinKit.gif

SpinKit的使用方法简直不要太简单,首先引用css

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图2)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<link rel="stylesheet" type="text/css" href="spinkit.css">

然后在页面适当地方插入你需要的动画效果代码即可。

动画效果代码:

Plane

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图5)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-plane"></div>

Chase

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图8)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-chase">
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div></div>

Bounce

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图11)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-bounce">
  <div class="sk-bounce-dot"></div>
  <div class="sk-bounce-dot"></div></div>

Wave

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图14)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-wave">
  <div class="sk-wave-rect"></div>
  <div class="sk-wave-rect"></div>
  <div class="sk-wave-rect"></div>
  <div class="sk-wave-rect"></div>
  <div class="sk-wave-rect"></div></div>

Pulse

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图17)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-pulse"></div>

Flow

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图20)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-flow">
  <div class="sk-flow-dot"></div>
  <div class="sk-flow-dot"></div>
  <div class="sk-flow-dot"></div></div>

Swing

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图23)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-swing">
  <div class="sk-swing-dot"></div>
  <div class="sk-swing-dot"></div></div>

Circle

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图26)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-circle">
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div>
  <div class="sk-circle-dot"></div></div>

Circle Fade

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图29)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-circle-fade">
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div>
  <div class="sk-circle-fade-dot"></div></div>

Grid

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图32)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-grid">
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div>
  <div class="sk-grid-cube"></div></div>

Fold

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图35)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-fold">
  <div class="sk-fold-cube"></div>
  <div class="sk-fold-cube"></div>
  <div class="sk-fold-cube"></div>
  <div class="sk-fold-cube"></div></div>

Wander

了解一下纯CSS实现的加载动画项目SpinKit页面加载(图38)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图3)了解一下纯CSS实现的加载动画项目SpinKit页面加载(图4)Markup
<div class="sk-wander">
  <div class="sk-wander-cube"></div>
  <div class="sk-wander-cube"></div>
  <div class="sk-wander-cube"></div></div>


转载于网络

本帖含有附件下载需要【注册会员】才能下载!

您当前状态为【游客】,请选择 【登录】

本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

本文链接:https://www.yuanma.cc/article/SEO/773.html
分享给朋友: