<!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. 几组不错的X264自定义编码<转>

    转帖地址:http://tieba.baidu.com/p/4201033507 一般直播时使用A设定即可.你尝试设置并找出你最满意的设定 A为最需最低CPU资源,E为最高. A8x8dct=1 aq ...

  2. java String标准格式转换Date（yyyy-MM-dd HH:mm:ss）

    SimpleDateFormat sdf=new SimpleDateFormat("yyy年MM月dd日hh点mm分"); Date date=new Date(); Strin ...

  3. Linux学习---linux系统下安装配置Jenkins

    1.首先准备java环境,安装JDK 2.下载jenkins至Linux服务器 下载地址:https://wiki.jenkins-ci.org/display/JENKINS/Installing+ ...

  4. clr相关的一些工具

    NGen.exe:将IL代码编译成本地代码. PEVerify.exe:它检查一个集所有方法并报告其中含不 的实用程序. ILDasm.ex:IL反编译 csc.exe:C#编译工具 ilasm.ex ...

  5. python中os.system()的返回值

    [python中os.system()的返回值] 如果第三方程序返回的是布尔型返回值,os.system会将true转为1,false转为0进行返回. 问题: /bin/xxx.py是一个返回码为1的 ...

  6. 05-SSH综合案例：环境搭建之配置文件的引入

    1.3 第三步导入相应配置文件 Struts框架中: * web.xml * 核心过滤器: <filter> <filter-name>struts2</filter-n ...

  7. Spring中的AOP（五）——定义切入点和切入点指示符

    定义切入点 在前文(点击查看)中使用到的AdviceTest类中同一个切点(即* com.abc.service.*.advice*(..)匹配的连接点)却重复定义了多次,这显然不符合软件设计的原则, ...

  8. 使用 ipmitool 实现 Linux 系统下对服务器的 ipmi 管理

    http://www.ibm.com/developerworks/cn/linux/l-ipmi/ 1．简介 IPMI(Intelligent Platform Management Interfa ...

  9. Code First 之类继承

    关于Entity Framework 的code first 模式,相信大家都不陌生了.本文就来看看实体继承在 codefirst里的用法. 第一步  添加 code first 的环境 这里为了方便 ...

  10. mybatis逆向工程的注意事项：mapper文件内容不是覆盖而是追加

    XXXMapper.xml文件已经存在时,如果进行重新生成则mapper.xml文件内容不被覆盖而是进行内容追加,结果导致mybatis解析失败. 解决方法:删除原来已经生成的mapper xml文件 ...