<!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. 【Mongo】数据备份与还原

    http://blog.51yip.com/nosql/1573.html mongorestore -d 数据库名 -c 集合名 --drop **.bson

  2. 重载 CreateParams 方法[2]: 重载 TForm.CreateParams 方法的几个例子

    这里有所有相关参数的解释: http://www.cnblogs.com/del/archive/2008/04/15/1154359.html //最大化窗口 procedure TForm1.Cr ...

  3. django 关闭debug模式，报500错误

    今天关闭了程序的debug模式,结果提示500错误.但是启动debug模式,又运行正常. Server Error (500) 上网查了以后,发现django1.5版本的要设置ALLOWED_HOST ...

  4. 给嵌入式ARM+Linux的初学者

    http://blog.csdn.net/lucykingljj/article/details/40619671

  5. mybatis由浅入深day02_9.3.5使用生成的代码_9.4逆向工程注意事项

    9.3.5 使用生成的代码 需要将生成工程中所生成的代码拷贝到自己的工程中. 拷这4个到我们原来的spring_mybatis1216工程下 ItemsMapper.java package cn.i ...

  6. JBPM4.4_执行流程实例

    1. 执行流程实例 1.1. 启动流程实例 说明:流程实例创建后,直接就到开始活动后的第一个活动,不会在开始活动停留. 1.1.1. 示例代码1:使用指定key的最新版本的流程定义启动流程实例 Pro ...

  7. Java精选笔记_文件上传与下载

    文件上传与下载 如何实现文件上传 在Web应用中,由于大多数文件的上传都是通过表单的形式提交给服务器的,因此,要想在程序中实现文件上传的功能,首先得创建一个用于提交上传文件的表单页面. 为了使Serv ...

  8. python2.0_s12_day9_协程&Gevent协程

    Python之路,Day9 - 异步IO\数据库\队列\缓存 本节内容 Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 协程 1.协程,又 ...

  9. shell基础（七）-条件语句

    条件语句在编写脚本经常遇到:用于处理逻辑问题. 一 IF 语句 if 语句通过关系运算符判断表达式的真假来决定执行哪个分支.Shell 有三种 if ... else 语句: if ... fi 语句 ...

  10. cocos2d-x游戏引擎核心之一——坐标系

    cocos2d-x:OpenGL坐标系.绝对坐标系.相对坐标系.屏幕坐标系 cocos2d-x采用的是笛卡尔平面坐标系,也就是平面上两条垂直线构成的坐标系,平面上任意一点都可以用(x,y)来表示. ( ...