效果查看：https://jsfiddle.net/rubys/je16qL5k/6/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css animation</title>

  <style>

    body {

      background-color: gray;

    }

    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

    @-webkit-keyframes spin { 100% { -webkit-transform:  rotate(360deg); } }

    @keyframes spin { 100% { -webkit-transform:  rotate(360deg); transform: rotate(360deg); } }

    .preloader {

      animation-name: spin;

      animation-duration: .5s;

      animation-timing-function: linear;

      -webkit-animation-delay: 0s;

      animation-animation-delay: 0s;

      animation-iteration-count: infinite;

      animation-direction: normal;

      animation-fill-mode: none;

      animation-play-state: running;

      border: 2px solid transparent;

      border-top: 2px solid #fff;

      border-left: 2px solid #fff;

      border-radius: 50px;

      opacity: 1;

      width: 32px;

      height: 32px;

      cursor: wait;

      display: block;

      transition: all 400ms ease !important;

      -webkit-animation: spin .6s linear infinite;

      -o-animation: spin .6s linear infinite;

      animation: spin .6s linear infinite;

    }

    #animation {

    }

  </style>

</head>

<body>

<div id="animation" class="preloader"></div>

</body>

</html>

　　

使用 css 的 keyframe 实现 loading 动画的更多相关文章

  1. 巧用 CSS 实现动态线条 Loading 动画

    有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题. 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div&g ...

  2. CSS实现四种loading动画效果

    四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  4. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

  5. loading动画效果记录

    看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...

  6. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  7. CSS3效果：animate实现点点点loading动画效果（二）

    box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...

  8. Css3实现常用的几种loading动画

    css实现loading动画非常方便,也非常实用 第一种 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. CSS3学习笔记之loading动画

    效果截图: HTML代码: <div class="divBox"> <div class="loader"> <div clas ...

随机推荐

  1. [T-ARA][HUE]

    歌词来源:http://music.163.com/#/song?id=22704406 wa du seu mo geum to yo do ga tae 어딜가도 스페셜한게 없어 [eo-dil ...

  2. 苹果任命奢侈品牌博柏利CEO为零售与在线商店高级副总裁

    苹果今天宣布任命英国奢侈品牌博柏利(Burberry)CEO安吉拉•阿伦茨(Angela Ahrendts)为零售与在线商店高级副总裁.这是一个新设的职位,未来她将直接向CEO蒂姆•库克(Tim Co ...

  3. 只执行一次的js 函数。

    function runOnce(fn, context) { //控制让函数只触发一次 return function () { try { fn.apply(context || this, ar ...

  4. ecshop以及一些需要注意的

    Deprecated: Assigning the return value of new by reference is deprecated in 定位到出错的那一行: $this->_ol ...

  5. 将Python文件打包为exe文件，并在控制台运行之简易教程

       第一步  在线安装 pyinstaller. 方法:打开win+ R,输入cmd,在命令行输入"pip install pyinstaller" 静等几分钟后即可安装成功. ...

  6. Python:Python的运行过程

    1.Python是什么 和Java以及c#一样,Python也是一门基于虚拟机的语言.熟悉Java开发的人在命令行执行一个Java程序的过程通常如下: javac hello.java java he ...

  7. iframe高度自适应的6个方法

    原文链接:http://caibaojian.com/iframe-adjust-content-height.html JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看 ...

  8. OpenNF tutorial复现

    这篇博客记录了自己实现OpenNF官网上tutorial的过程和遇见的问题,如果有不对的地方还请批评指正! tutorial链接 实验内容 这个实验展示了如何迅速且安全地把一个TCP流从一个NF实例迁 ...

  9. HDU 5273 Dylans loves sequence 暴力递推

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5273 bc:http://bestcoder.hdu.edu.cn/contests/con ...

  10. webpack打包多html开发案例

    简单说明: 1,案例没有使用devserver,所以不能实时查看 2,案例是将src下面的html.css.js分别进行处理 3,多html的规律是需要有多个entry,每个html一个entry,当 ...