效果查看：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. 【转】: 塞尔达组在GDC2017演讲的文字翻译：创新的勇气

    大家好,我是藤林秀麿,以导演的身份参与<荒野之息>的制作,感谢大家的出席.我曾经作为设计者和导演制作了诸多塞尔达游戏(大地与时空之章.缩小帽.四支剑.幻影沙漏.天空之剑),回首望去,我已经 ...

  2. Spring单元测试集成H2数据库

    项目源代码在:Spring-H2测试 H2简介 H2数据库是一种由Java编写的,极小,速度极快,可嵌入式的数据库.非常适合用在单元测试等数据不需要保存的场景下面. 以下时其官网的介绍: {% blo ...

  3. NodeJS实现同步的方法

    NodeJS被打上了单线程.非阻塞.事件驱动…..等标签. 在单线程的情况下,是无法开启子线程的.经过了很久的研究,发现并没有thread函数!!!但是有时候,我们确实需要“多线程”处理事务.node ...

  4. Github上的一些高分Qt开源项目【多图】

    游戏2D地图编辑器: 著名的TileMap编辑器,做2D游戏开发的一定不会陌生. Go 语言的IDE: Go语言的集成开发环境. Clementine Music Player: 功能很完善且跨平台支 ...

  5. Bean的装配

    1.可以从ApplicationContext上下文获取和bean工厂获取容器,bean工厂只建议在移动端应用使用. 2.如果使用的是applicationContext配置的是bean,如果作用域是 ...

  6. ES6的新特性（7）——函数的扩展

    函数的扩展 函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console ...

  7. python---json.dumps 与 json.loads /json.dump 和json.load区别

    json.dumps 是将python的数据类型进行json的编码,生成json格式的数据,举例json_data = json.dumps(str)  str为python的字符串类型数据,生成的j ...

  8. Pythagorean Triples毕达哥斯拉三角（数学思维+构造）

    Description Katya studies in a fifth grade. Recently her class studied right triangles and the Pytha ...

  9. Xftp安装和使用的视频录制方法

    内容: 1.使用工具 2.操作步骤及方法 视频地址: http://v.youku.com/v_show/id_XMzEwNjg2MTg2NA==.html?spm=a2h3j.8428770.341 ...

  10. HDU 5225 枚举

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5225 bc(中文):http://bestcoder.hdu.edu.cn/contests ...