<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>纯css3加载动画</title>
<style>
.spinner {
width: 100px;
height: 100px;
border: 5px solid #666;
margin: 100px auto;
border-left: 6px solid #fff;
border-radius: 50%;
animation: load 1.1s infinite linear;
-webkit-animation: load 1.1s infinite linear;
}
@keyframes load {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes load {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>

<body style="background: #000 repeat;">

<div class="spinner"></div>

</body>

</html>

纯css3加载动画的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. CSS3加载动画

    图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图:   图2 代码: 使用1个名为'l ...

  3. javascript,css3加载动画

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  4. css3 加载动画效果

    Loading 动画效果一           HTML 代码: <div class="spinner"> <div class="rect1&quo ...

  5. 好用的纯CSS加载动画-spinkit

    首先放一个css  spinkit <style> .loaders{ width: 100%; height: 100%; padding: 100px; box-sizing: bor ...

  6. css3 加载动画

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  7. 炫酷CSS3加载动画

    <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8&qu ...

  8. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  9. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

随机推荐

  1. Spring Cloud在国内中小型公司用的起来吗？

    转自:http://www.cnblogs.com/ityouknow/p/7508306.html 今天吃完饭休息的时候瞎逛知乎,突然看到这个一个问题Spring Cloud在国内中小型公司能用起来 ...

  2. python--list和tuple类型--2

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 一.创建list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以 ...

  3. Effective C++ Item 12 Copy all parts of an object

    This one is simple, do not forget to copy all parts of an object in copy constructor or assignment o ...

  4. row_number()over函数的使用(转)

    (转)http://hi.baidu.com/122439049/blog/item/0c9c48131b2734d5f7039e13.html row_number() OVER (PARTITIO ...

  5. 如何把he_llo wo_rld 变成 HeLlo WoRld

    有人问如何把he_llo wo_rld 变成 HeLlo WoRld,估计应该是一道面试的基础题吧. 思路很多种,就看如何实现 思路一.先根据空格分隔,然后转大写,最后再拼接.代码如下 <?ph ...

  6. [笔试题]MS 2014

    http://blog.csdn.net/xiaoerlyl/article/details/12126807 别人写的答案: http://blog.csdn.net/zhou2214/articl ...

  7. /etc/docker/key.json

    /etc/docker/key.json 描述信息: This is the dockerd key for TLS connections.in web format, that docker us ...

  8. OSG绘制金字塔geode+动态纹理坐标

    osg::Node* createPyramidModel() { // create the root node which will hold the model. osg::Group* roo ...

  9. C++成员初始化列表的语法

    如果Classy是一个累,而mem1.mem2.mem3都是这个类的数据称源,则类构造函数可以使用如下的语法来初始化数据成员:Classy::Classy(int n, int m) : mem1(n ...

  10. PyQt4工具栏

    工具栏 菜单对程序中的所有命令进行分组防治,而工具栏则提供了快速执行最常用命令的方法. #!/usr/bin/python # -*- coding:utf-8 -*- import sys from ...