<!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. why pure virtual function has definition 为什么可以在基类中实现纯虚函数

    看了会音频,无意搜到一个frameworks/base/include/utils/Flattenable.h : virtual ~Flattenable() = 0; 所以查了下“纯虚函数定义实现 ...

  2. 使用mysqldump工具对数据库进行全备份

    需求描述: 通过mysqldump工具的--all-databases选项对所有数据库进行备份. 操作过程: 1.通过--all-databases选项对所有的数据库进行备份 [mysql@redha ...

  3. 在可部署到brew真机上的程序包构建完之后又要如何将该程序包发布到真机上呢

    1.到brew官网上去申请含有classid的bid文件,以及.sig文件 2.根据申请到的bid文件重新生成mif文件. 3.将mif文件部署到brew真机上的mif文件夹下. 4.在真机上的bre ...

  4. mybatise 实现同一字段多模糊查询

    mybatise 同一字段多模糊查询 <foreach collection="typeList" index="index" item="it ...

  5. Javascript中的感叹号和函数function

    js函数前加分号和感叹号是什么意思?有什么用?:http://www.cnblogs.com/mq0036/p/4605255.html function与感叹号:https://swordair.c ...

  6. laravel安装 redis 并驱动 session

    1)composer 安装 redis composer require predis/predis 如果感兴趣,可以看一下这里 2)配置 redis 连接(config/database.php 配 ...

  7. Discuz 升级X3问题汇总整理

    最近一段时间公司的社区垃圾帖数量陡然上涨,以至于社区首页的推荐版块满满都是垃圾帖的身影,为了进一步解决垃圾帖问题我们整整花了1天时间删垃圾贴,清除不良用户,删的手都酸了,可见垃圾帖的数量之多!可耻的刷 ...

  8. __declspec的用法

    __declspec用于指定所给定类型的实例与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI规范,而__declspec是一种扩展 ...

  9. C#的命令行工具

    ​在最开始学java的时候我们一般用 记事本 + 命令行,在命令行里边进行编译和运行, C#也有类似的东西(csc工具),在学习C#语言的时候可以用 文本编辑器来编写代码,然后用C#的命令行工具来编译 ...

  10. 【BZOJ3958】[WF2011]Mummy Madness 二分+扫描线+线段树

    [BZOJ3958][WF2011]Mummy Madness Description 在2011年ACM-ICPC World Finals上的一次游览中,你碰到了一个埃及古墓. 不幸的是,你打开了 ...