<!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. Win10開始菜单打不开

    一.前言 自从用Win10之后(附上<我的Win10之旅>).用清理软件.总是深度清理,导致rt问题. 每次百度都是没用的解决方法: 今天,再一次清理(Wise Care 365 注冊表深 ...

  2. vs2008 调试时不会命中断点,源代码与原始版本不同,解决办法

    当前不会命中断点,源代码与原始版本不同,解决办法 1.应该是自己一行里写的代码太长了 格式化一下 或者 换下行 2. VC直接把整个文件格式化了一次,断点就可以用了 菜单:编辑-〉高级-〉设置选定内容 ...

  3. 【Python】添加注册表信息脚本

    http://wrox.cn/article/1004030/ # -*- coding: utf-8 -*- """ Created on Tue Jun 02 16: ...

  4. 使用鼠标监听器，使鼠标悬停在JTable某行时背景色改变

    一.需要知道的事实: 1.当鼠标悬停在JTable上时,相应的格子(cell)的渲染器(TableCellRenderer)的渲染方法(getTableCellRenererComponent)会被调 ...

  5. mybatis由浅入深day02_8spring和mybatis整合

    8 spring和mybatis整合 8.1 整合思路 需要spring通过单例方式管理SqlSessionFactory.mapper接口. spring和mybatis整合生成代理对象,使用Sql ...

  6. 7 -- Spring的基本用法 -- 5... Spring容器中的Bean；容器中Bean的作用域；配置依赖；

    7.5 Spring容器中的Bean 7.5.1 Bean的基本定义和Bean别名 <beans.../>元素是Spring配置文件的根元素,该元素可以指定如下属性: default-la ...

  7. mac平台安装类似yum的工具

    首先从Apple Store下载Xcode,然后安装Xcode,接着安装Homebrew包管理,类似于Ubuntu下的apt-get: 终端下输入ruby -e "$(curl -fsSL ...

  8. SYN攻击处理

    针对SYN攻击的几个环节,提出相应的处理方法: 方式1:减少SYN-ACK数据包的重发次数(默认是5次): sysctl -w net.ipv4.tcp_synack_retries=3 sysctl ...

  9. 如何在CLI命令行下运行PHP脚本，同时向PHP脚本传递参数？

    <?php/* //命令行输入输出流fwrite(STDOUT,"Enter your name:"); $name = trim(fgets(STDOUT)); fwrit ...

  10. ajax如何上传文件

    PHP: <?php /** * Created by PhpStorm. * User: DELL * Date: 2017/11/23 * Time: 10:57 */ header(&qu ...