<!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. Shell 获取Shell所在目录

    SHELL_PATH=$(cd ")";pwd) echo $SHELL_PATH

  2. jQuery-理解事件

    一.理解事件 1.什么是事件 事件是Web浏览器通知应用程序(比如我们的js)发生了某个事情! 我们可以为这些特定的事情,事先安排好处理方案,这样就能够实现互动! 2.事件目标 你可以简单的理解为事件 ...

  3. MathType编辑物理单位的方法

    在用MathType编辑物理公式时,由于物理单位很多都是复合单位,所以在编辑时如果能够有这种复合单位直接使用的话,编辑效率就会大大提高.实际上这种想法在MathType中是可行的,MathType中也 ...

  4. MathType在手，公式不求人！

    很多论文达人们的论文排版是相当漂亮的,页面也非常整齐美观,即使是理工类的论文,里面有很多的数学符号和公式,排版也是非常整洁,为什么达人们的公式论文能排版的这么完美,而自已却总是不得其门而入,最后只好救 ...

  5. 【matlab】使用VideoReader提取视频的每一帧，不能用aviread函数~

    这个问题是matlab版本问题,已经不用aviread函数了~ VideoReader里面没有cdata这个函数! MATLAB不支持avireader了,而且没有cdata这个属性了,详情去官网ht ...

  6. 【java】 java 设计模式(1):工厂方法模式（Factory Method）

    工厂方法模式分为三种: 1.普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建.首先看下关系图: 举例如下:(我们举一个发送邮件和短信的例子) 首先,创建二者的共同接口:   p ...

  7. day05<Java语言基础--数组>

    Java语言基础(数组概述和定义格式说明) Java语言基础(数组的初始化动态初始化) Java语言基础(Java中的内存分配以及栈和堆的区别) Java语言基础(数组的内存图解1一个数组) Java ...

  8. Python 安装环境

    一.setuptools安装 1.下载ez_setup.py(https://bootstrap.pypa.io/ez_setup.py),并放到Python目录之中(版本相互一致): 2.使用CMD ...

  9. Linux ulimit 命令

    ulimit命令用来限制系统用户对 shell 资源的访问,常见用法如下: [root@localhost ~]$ ulimit -a # 查看当前所有的资源限制 [root@localhost ~] ...

  10. linux系统socket通信编程1

    Linux下的Socket编程大体上包括Tcp Socket.Udp Socket即Raw Socket这三种,其中TCP和UDP方式的Socket编程用于编写应用层的socket程序,是我们用得比较 ...