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

小秋同学 10-20 11:02:15 学习园地
摘要: 不会做加载动画?了解一下纯CSS实现的加载动画项目SpinKit啊!有时候我们在做项目的时候会加入一些动画来表示正在加载,正在运行等状态。对于我这种野路子而言,完全自己写一套动画是绝对不可能的,于是就找到了这个叫做SpinKit的项目。SpinKit摘要: 不会做加载动画?了解一下纯CSS实现的加载动画项目SpinKit啊!有时候我们在做项目的时候会加入一些动画来表示正在加载,正在运行等状态。对于我这种野路子而言,完全自己写一套动画是绝对不可能的,于是就找到了这个叫做SpinKit的项目。SpinKit

不会做加载动画?了解一下纯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.qiuhai.com/study/773.html发布于 10-20 11:02:15
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~