效果查看：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. 420. Count and Say【LintCode java】

    Description The count-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, ...

  2. Hyperledger_Fabric_Model

    Hyperledger_Fabric_Model 本部分描述了Hyperledger Fabric的主要设计特点 Assets: 资产定义使得任何东西都可以通过货币值在网络中交易,从食物到老爷车再到期 ...

  3. python knn自我实践

    #得到分类数据和测试数据 import pymysql import struct from numpy import * a=['']*20 #存图像 分类数据 b=[[0]*76800]*20#存 ...

  4. vue视频插件VLC

    VLC 仅支持windows下特定版本火狐浏览器--Firefox_ESR_55.3 <template> <object type='application/x-vlc-plugi ...

  5. mininet实验 脚本实现控制交换机行为

    写在前面 本文参考 通过这个实验,我学习到了另一种下流表的方式. 下流表有两种方式(我目前了解): 通过controller下发. 通过OvS提供的API直接向OvS交换机下流表. 本实验脚本已经把相 ...

  6. fast-IO

    代码: int Scan() //输入外挂 { ,ch,flag=; if((ch=getchar())=='-') flag=; ') res=ch-'; ') res=res*+ch-'; ret ...

  7. HDU 5418 Victor and World 允许多次经过的TSP

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

  8. android入门 — Activity生命周期

    Activity总共有7个回调方法,代表着不同的生命周期的环节. 1.onCreate() 在活动第一次被创建的时候调用.在这个方法中需要完成活动的初始化操作,比如说加载布局.绑定事件等. 2.onS ...

  9. gmssl

    一.安装 1.1 github地址 1.2 官网地址 由于我本地虚拟机跑的是centos,按照官网的安装步骤,没有安装成功.后来使用github上提供的安装步骤完美编译安装成功. 二.使用 由于gms ...

  10. CentOS7实现RabbitMQ高可用集群

    CentOS安装RabbitMQ集群 1.有3台已安装RabbitMQ的机器 192.168.38.133 rabbitmq1 192.168.38.137 rabbitmq2 192.168.38. ...