效果查看：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. 树形dp入门两题

    题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题.于是当日课后,小明 ...

  2. spark总结——转载

    转载自:    spark总结 第一个Spark程序 /** * 功能:用spark实现的单词计数程序 * 环境:spark 1.6.1, scala 2.10.4 */ // 导入相关类库impor ...

  3. 0329--Scrum团队准备工作

    一.团队名称,团队目标.团队口号.团队照 1.团队名称:Blackhriar 2.团队目标:完成一个完善的,可以投入市场供用户使用,甚至具有一定商业价值的项目~come on! 3.团队口号:抱怨事件 ...

  4. 2nd 词频统计更新

    词频统计更新 实现功能:从控制台输入文件路径,并统计单词总数及不重复的单词数,并输出所有单词词频,同时排序. 头文件 #include <stdio.h> #include <std ...

  5. 【Leetcode】771. Jewels and Stones

    (找了leetcode上最简单的一个题来找一下存在感) You're given strings J representing the types of stones that are jewels, ...

  6. SpringCloud——服务网关

    1.背景 上篇博客<SpringCloud--Eureka服务注册和发现>中介绍了注册中心Eureka.服务提供者和服务消费者.这篇博客我们将介绍服务网关. 图(1) 未使用服务网关的做法 ...

  7. Tomcat安装及配置详解

    Tomcat安装及配置详解   一,Tomcat简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,Tomcat是Apache 软件基金会(Apache Software Found ...

  8. js & right click menu & 鼠标滑词

    js & right click menu & 鼠标滑词 // 鼠标滑词 mouseSlipGetWords() { const getSelectionText = () => ...

  9. wpf下使用NotifyIcon

    以前在winForm下使用过NotifyIcon,到wpf找不到了,在wpf下还是直接用WinForm里的那个NotifyIcon实现最小到系统托盘 定义一个NotifyIcon成员 : Notify ...

  10. python的N个小功能(文本字段对应数值,经纬度计算距离,两个时间点计算时间间隔)

    案例1 >>> import pandas as pd >>> df=pd.DataFrame({'A':[1,2,3],'B':[1,2,3],'C':[1,2, ...