<!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. 演示--Jquery核心选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. ANSI 转 UTF-8

    ANSI和UTF-8格式都不太了解,各自好像都有好几种,下载了一个库,文件基本都是ANSI格式,linux显示乱码,原来都是在虚拟机一个个的“另存为“完成的,这次文件有点多,因此需要用命令完成. 以下 ...

  3. Android SDK的安装教程

      Android4.1虽说已经发布了好些天,但由于的我手机比较坑,系统依旧保持在2.3.4.0的都是可望不可即的了,就别说4.1.由于资金的问题,没法换手机,只能另想方法,通过在笔记本上装andro ...

  4. 感恩节MathType公式编辑器6折优惠启动

    MathType是由美国Design Science公司开发功能强大的公式编辑器,专门用来对数学公式的编辑,与常见的文字处理软件和演示程序配合使用,能够在各种文档中加入复杂的数学公式和符号.感恩节期间 ...

  5. linux mint 19解决 输入法问题

    安装搜狗后出现 You're currently running Fcitx with GUI, but fcitx-configtool couldn't be found, the package ...

  6. 关于使用_bstr_t的一个坑

    编程中需要将_variant_t转换为char*,常用的方法是:(const char*)_bstr_t(c_variant_t); 使用_bstr_t的构造函数:  _bstr_t(const _v ...

  7. python3.0与python2.0有哪些不同

    python3的语法跟python2哪里变了. 1. python3中1/2终于等于0.5 了 2. print "Hello World"变成了print("Hello ...

  8. 批处理bat文件dos命令复制文件

    ::将“C:\Users\ZZ\Desktop\快捷处理\我我我哦我”路径下的文件复制到“C:\Temp\我我我哦我”路径下::/S表示“复制目录和子目录,除了空的.”::/E表示“复制目录和子目录, ...

  9. VS2015编译OpenSSL1.0.2源码

    更多详细信息http://blog.csdn.net/YAOJINGKAO/article/details/53041165?locationNum=10&fps=1 1.下载安装编译必须的A ...

  10. windows下配置VisualSVN Server服务器

    下载安装文件: 服务端安装文件:VisualSVN-Server-1.6.2 客户端安装文件:TortoiseSVN-1.5.5.14361-win32-svn-1.5.4 上面是我使用的版本. 在V ...