效果查看：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. Python中如何实现im2col和col2im函数（sliding类型）

    今天来说说im2col和col2im函数,这是MATLAB中两个内置函数,经常用于数字图像处理中.其中im2col函数在<MATLAB中的im2col函数>一文中已经进行了简单的介绍. 一 ...

  3. 导出Office365中的组及成员

    Set-ExecutionPolicy unrestricted $cred = Get-Credential  $session = New-PSSession -ConfigurationName ...

  4. Java反编译插件

    一.eclipse->help->Eclipse Marketplace 如下图:搜索JadClipse,install进行下载安装,

  5. eclipse技巧-快捷键

    ctrl + 1,快速修复 ctrl + d, 快捷删除行 shift + Enter,快速移动光标到下一行 ctrl + F11,运行代码 alt + ↑/↓,快速移动行 ctrl + alt + ...

  6. loadrunner之analysis详解

    本文原出处:http://blog.csdn.net/lykangjia/article/details/56009750 一.常用到的性能测试术语 1.事务(Transaction) 在web性能测 ...

  7. VisualSVN Server的配置和使用方法

    VisualSVN Server的配置和使用方法 VisualSVN Server的配置和使用方法[服务器端] 安装好VisualSVN Server后[安装过程看这里],运行VisualSVN Se ...

  8. react native组件的创建

    react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...

  9. 动态规划——最长公共子序列LCS及模板

    摘自 https://www.cnblogs.com/hapjin/p/5572483.html 这位大佬写的对理解DP也很有帮助,我就直接摘抄过来了,代码部分来自我做过的题 一,问题描述 给定两个字 ...

  10. Scrum立会报告+燃尽图（十月十八日总第九次）：功能细化与数据库设计

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 项目地址:https://git.coding.net/zhang ...