<!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. Oracle Net Manager 服务命名配置以及用PL/SQL 登陆数据库

    我们知道,要连接一个数据库需要知道四个参数: 1. 登陆用户名:user: 2. 登录密码:password: 3. 存放数据库的服务器地址(server_ip)和端口(server_port): 4 ...

  2. 【Python】多线程2

    threading模块 import time import random import threading class Inclass: def __init__(self): print 'Inc ...

  3. C#委托和事件详解

    委托Delegate delegate是C#中的一种类型,它实际上是一个能够持有对某个方法的引用的类.与其它的类不同,delegate类能够拥有一个签名(signature),并且它"只能持 ...

  4. 为什么MathType窗口变灰色

    mathtype是一个功能强大的数学公式编辑器,可以轻松输入各种复杂的公式和符号,与Office文档完美结合,显示效果超好,比Office自带的公式编辑器要强大很多.但我们在使用MathType编辑公 ...

  5. linux中，ssh实现免密自动登录到远程主机，ssh信任的实现

    需求描述: 平时使用ssh的时候,一般使用ssh都是通过用户名和密码登录到远程主机上, 然后执行一些命令,远程登录过程中,需要手动的输入密码(提示输入密码之后), 但是,在实际的应用过程中,涉及到让脚 ...

  6. nginx配置技巧汇总

    https://segmentfault.com/a/1190000000437323

  7. CRC-16校验C#代码

    [csharp] view plaincopyprint? using System; using System.Collections.Generic; using System.Text; usi ...

  8. CUGBACM Codeforces Tranning 1 题解

    链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=61581#overview 描写叙述:非常老的CF题,题不错,拿来训练正好. 做的时 ...

  9. nyoj-655-光棍的yy(大数)

    光棍的yy 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 yy常常遇见一个奇怪的事情.每当他看时间的时候总会看见11:11,这个非常纠结啊. 如今给你m个1,你能够 ...

  10. Java课后简答题

    1.简述Java的特点. 面向对象.跨平台性.健壮性.安全性.可移植性.多线程性.动态性等. 2.简述JRE与JDK的区别. JRE(Java Runtime Environment,Java运行时环 ...