<!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. 第四章 Spring.Net 如何管理您的类___统一资源访问接口

    在前面章节有童鞋提到过 关于配置文件 Objects.xml 路径的相关问题,这些东西是 IResource 接口的一些内容,接下来就详细介绍一下 IResource 接口. IResource 接口 ...

  2. 超全面的JavaWeb笔记day02<CSS&JavaScript>

    1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...

  3. Java集合----概述、Collection接口、Iterator接口

    Java 集合概述 Java 集合就像一种容器,可以把多个对象的引用放入容器中. Java 集合类可以用于存储数量不等的多个对象,还可用于保存具有映射关系的关联数组 Java 集合可分为 Set.Li ...

  4. Dubbo注册中心Zookeeper安装步骤

    第一步:安装jdk 第二步:上传zookeeper至Linux 第三步:解压zookeeper安装包(/soft目录是我在根目录下建立的一个用户存放上传安装包的目录),解压命令tar -xvf /so ...

  5. 华为P10闪存门

    随着余承东的倡议书以及五一假期3天的时间冲刷,华为的闪存门事件,似乎被冲淡了.但相信还有很多人对华为“闪存门”的起始及发展过程不是特别了解.而华为作为2017年Q1季度手机出货量的冠军,居然在4月份出 ...

  6. C++11新特性之0——移动语义、移动构造函数和右值引用

    C++引用现在分为左值引用(能取得其地址)和 右值引用(不能取得其地址).其实很好理解,左值引用中的左值一般指的是出现在等号左边的值(带名称的变量,带*号的指针等一类的数据),程序能对这样的左值进行引 ...

  7. php学习十四：抽象，接口和多态

    多态为面向对象编程的精华所在,js等面向过程的语言虽然可以模拟面向对象,但是毕竟模仿的永远比不上真的,所以了解而且会使用面向对象的多态是必不可少的 在了解多态之前,我们必须要了解接口,但是接口又是在抽 ...

  8. PyQt4重写事件处理方法

    PyQt中的事件处理主要以来重写事件处理函数来实现. #!/usr/bin/python # -*- coding: utf-8 -*- import sys from PyQt4 import Qt ...

  9. 【整理】Virtualbox中的网络类型（NAT，桥接等），网卡，IP地址等方面的设置

    之前是把相关的内容,放到: [已解决]实现VirtualBox中的(Guest OS)Mac和主机(Host OS)Win7之间的文件和文件夹共享 中的,现在把关于网络配置方面内容,单独提取出来,专门 ...

  10. 小程序：将gbk转为utf-8

    是否有过写了半天代码,发现竟然用的GBK编码,然后到主UTF-8上发现中文全部变成乱码了... 下面这个程序,只要输入src的位置,瞬间转换成utf-8 package tools; import j ...