<!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. C++ string char[] 转化

    可见到string转char[]相当简单,只要呼叫string class的成员函式c_str(),即可将string转为char[].那么char[]转string呢?有两种方法,第一种是初始str ...

  2. bootstrap中如何使input中的小图标获得点击事件

    bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...

  3. Resharper 安装以及破解

    首先进行软件安装 安装后 解压下载好的 文件 会得到如下: 打开序列号 会看到 然后  复制 %LocalAppData%\\JetBrains 路径 会得到进入当前JetBrains 文件夹 然后搜 ...

  4. JAVA程序员应该看的15本书的电子版

    转载▼ 转载自:http://blog.sina.com.cn/s/blog_8297f0d00100v5ew.html 作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多, ...

  5. 浅析Linux内核同步机制

    非常早之前就接触过同步这个概念了,可是一直都非常模糊.没有深入地学习了解过,最近有时间了,就花时间研习了一下<linux内核标准教程>和<深入linux设备驱动程序内核机制>这 ...

  6. Zookeeper异常org.apache.zookeeper.KeeperException$ConnectionLossException

    在虚拟机上安装了CenOS Linux系统,然后配置好了 zookeeper的集群环境,在本地写了一个Zookeeper测试程序,如下: package com.xbq.zookeeper; impo ...

  7. Linux tty 命令

    终端:终端(Terminal)也称终端设备,是计算机网络中处于网络最外围的设备(如键盘 .打印机 .显示器等),主要用于用户信息的输入以及处理结果的输出 TTY:TTY 是 Teletype(电传打字 ...

  8. 安装配置博客WordPress

    1.下载并解压WordPress cd /usr/local/src wget https://cn.wordpress.org/wordpress-4.4.2-zh_CN.tar.gztar zcv ...

  9. lua和C++交互的lua栈操作——以LuaTinker为例

    一. -- C++类注册函数(LuaTinker) 的lua栈操作: -- lua栈内容(执行到pop语句) 栈地址 <--执行语句 space_name[name] = t1 -- (2b8) ...

  10. JS选中清空

    var inputArray = document.getElementsByTagName("input"); var strArray = []; ; i < input ...