不会做加载动画?了解一下纯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>


转载于网络