<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS 加载动画</title>

<style>

body {

  background-color: #fff;

}

#demo {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

#loading {

    display: block;

    position: relative;

    left: 50%;

    top: 50%;

    width: 200px;

    height: 200px;

    margin: -90px 0 0 -90px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color: red;

    -webkit-animation: spin 2s linear infinite;

    animation: spin 2s linear infinite;

}

#loading:before {

    content: "";

    position: absolute;

    top: 5px;

    left: 5px;

    right: 5px;

    bottom: 5px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color: #000;

    -webkit-animation: spin 3s linear infinite;

    animation: spin 3s linear infinite;

}

#loading:after {

    content: "";

    position: absolute;

    top: 20px;

    left: 20px;

    right: 20px;

    bottom: 20px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color: #FF00FF;

    -webkit-animation: spin 1.5s linear infinite;

    animation: spin 1.5s linear infinite;

}

@-webkit-keyframes spin {

    0%   {

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    100% {

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@keyframes spin {

    0%   {

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    100% {

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

</style>

</head>

<body>

<div id="demo">

  <div id="loading"></div>

</div>

</body>

</html>

效果图：

css3旋转动画的更多相关文章

  1. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. CSS3 skew倾斜、rotate旋转动画

    css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...

  4. 超绚丽CSS3多色彩发光立方体旋转动画

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...

  5. 纯CSS3浮雕质感的立体文字旋转动画

    还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...

  6. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  7. css3立体旋转动画

    demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...

  8. css3 3d旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

随机推荐

  1. linux学习(别人指出来的), 回头有针对性的学下!

    应该是 会linux 基本操作吧linux 安装 lamp lnmp php拓展这些基本都得会把知道subversion 和 github 这俩吧windows的代码同步到linux上无需ftp 会跟 ...

  2. 跟我学算法-图像识别之图像分类（上）(基础神经网络， 卷积神经网络（CNN)， AlexNet，NIN, VGG）

    1.基础神经网络: 输入向量x,权重向量w, 偏置标量b, 激活函数sigmoid(增加非线性度) 优化手段: 梯度下降优化, BP向后传播(链式规则) 梯度下降优化: 1. 使用得目标函数是交叉熵  ...

  3. Apache Hive 安装文档

    简介: Apache hive 是基于 Hadoop 的一个开源的数据仓库工具,可以将结构化的数据文件映射为一张数据库表, 并提供简单的sql查询功能,将 SQL 语句转换为 MapReduce 任务 ...

  4. Android gralloc 模块实例

    本文实例为借鉴 http://www.ixueyi.com/jingyan/1865079.html 该文档后所写.主要是android的gralloc操作显存的模块实例,如有不正确的地方欢迎指出谢谢 ...

  5. JAVA获取时间的方式

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...

  6. MFC The Screen Flickers When The Image Zoomed

    问题描述 当初写MFC也是不情愿的. 既然写了,遇到一些问题. 解决也废了一切功夫.所以简单的记录一下. 这个问题,也就是使用MFC显示图像的时候, 放缩图像的过程中, 图像会一闪一闪的. 这个问题的 ...

  7. c++中冒号（:）和双冒号（::）的用法

    1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef struct _XXX{ unsigned char a:4; unsigned char c; } ; X ...

  8. spring定时任务执行两次的原因与解决方法

    spring定时任务,本地执行一次,放到服务器上后,每次执行时会执行两次,原因及解决办法. http://blog.csdn.net/yaobengen/article/details/7031266 ...

  9. JavaScript 语法总结2

    1. 对象的toString()和valueOf(). - toString() 和Java中的toString() 一样 - valueOf(), 和toString() 都是用来进行类型转换的方法 ...

  10. Devexpress VCL Build v2013 vol 13.2.3 发布

    继续修修补补,大过年的,就不吐槽了. What's New in 13.2.3 (VCL Product Line)   New Major Features in 13.2 What's New i ...