<!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. MyEclipse安装EGit插件方法

    摘要: 先了解自己的MyEclipse是基于哪个版本的Eclipse优化的,然后到EGit网站找对应的EGit版本,下载压缩包,解压安装. 在网上看到有人说并不是任意版本的EGit插件都能适配你的My ...

  2. C++类中静态成员函数

    引述自<深入探索C++对象模型>2001:5:1版次,p-150 static member functions的主要特性就是它没有this指针,所以: 1.它不能直接存取其所在class ...

  3. EasyUI 扩展自定义EasyUI校验规则 验证规则

    $.extend($.fn.validatebox.defaults.rules, {CHS: {validator: function (value, param) {return /^[\u039 ...

  4. 在懂得BREW接口的原理之后, 那么该知道BREW接口是如何声明和实现了

    参考:http://blog.csdn.net/peteryxk/article/details/1584514 首先介绍几个用到的宏定义: l         #define VTBL(iname) ...

  5. centos上编译bitcoin

    需要预先安装的东西 autoconf automake labtool openssl-devel boost-devel libevent

  6. option 选不中问题

    function appAndBuz(appName,buzName,areaCenterCode){ //appName,buzName下拉框的值start $.ajax({ type: " ...

  7. CSS美化自己的完美网页

    CSS美化自己的完美网页   CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...

  8. IT English Collection(20) of Object modeling

    1 前言 本节简单的介绍了对象建模,以及需要注意的事项. 2 详述 2.1 原文 Objectmodeling is the process of designing the objects or c ...

  9. ubuntu的两种网络连接模式

    ubuntu的网络连接分成两种类型,一种是modern 模式, 这种模式的配置通过ifconfig命令来进行配置,重启之后失效,这种模式就是在destop 下右上角的网络连接.如图所示 modern模 ...

  10. 腾讯云CMQ消息队列在Windows环境下的使用

    版权声明:本文由李少华原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/100 来源:腾云阁 https://www.qclo ...