<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>http://www.zhangxinxu.com/wordpress/2014/12/css3-animation-dotting-loading/</title>
<style>
.grebtn{
display: inline-block;
padding: 0.25em 1.25em;
border: 1px solid;
border-radius: 2px;
vertical-align: bottom;
font-weight: inherit;
border-color: #208000 #1F7F00;
background-color: #289600;
box-shadow: inset 0 0 1px rgba(255,255,255,.6), 0 1px #8DBF62;
color: #fff;
text-shadow: 0 -1px #137900;
text-decoration: none;
}
.dotting {
display: inline-block; width: 10px; min-height: 2px;
padding-right: 2px;
border-left: 2px solid currentColor; border-right: 2px solid currentColor;
background-color: currentColor; background-clip: content-box;
box-sizing: border-box;
-webkit-animation: dot 4s infinite step-start both;
animation: dot 4s infinite step-start both;
*zoom: expression(this.innerHTML = '...'); /* IE7 */
}
.dotting:before { content: '...'; } /* IE8 */
.dotting::before { content: ''; }
:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */

@-webkit-keyframes dot {
25% { border-color: transparent; background-color: transparent; }
50% { border-right-color: transparent; background-color: transparent; }
75% { border-right-color: transparent; }
}
@keyframes dot {
25% { border-color: transparent; background-color: transparent; }
50% { border-right-color: transparent; background-color: transparent; }
75% { border-right-color: transparent; }
}
</style>
</head>
<body>
<a href="javascript:" class="grebtn">订单提交中<span class="dotting"></span></a>
</body>
</html>

css3 loading动画 三个省略号的更多相关文章

  1. 简单的CSS3 Loading动画

    最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...

  2. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  3. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  4. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  5. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  6. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  7. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  8. CSS3效果：animate实现点点点loading动画效果（二）

    box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...

  9. Css3实现常用的几种loading动画

    css实现loading动画非常方便,也非常实用 第一种 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. window编程之win程序框架

    int APIENTRY _tWinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hPrevInstance, _In_ LPTSTR lpCmd ...

  2. UE4从零搭建CF游戏关卡（蓝图篇）

    一 往关卡中放置物体 二 Static Mesh 和 BSP 从今天开始我们要建立一个类似CF游戏的场景,不写一句代码,纯蓝图实现. 三 英语学习 今天早上开会,经理说了一件让我震惊的事情,她说最近大 ...

  3. Github创建分支

    一.clone Repository clone Github 上的Repository,如下: git clone git@github.com:FBing/design-patterns.git ...

  4. C++ 友元函数的函数指针

    成员函数的指针 讲友元之前先讲普通的成员函数的函数指针 class Std_interface { public: virtual void suspend() = 0; }; // define t ...

  5. table标签中thead、tbody、tfoot的作用

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...

  6. Eclipse插件的各种安装方法

    这篇文章我们总结下安装Eclipse的各种方法,首先一下的步骤都是在版本为“Kepler Service Release 1”的Eclipse下完成的.如果你的Eclipse版本不是"Kep ...

  7. 【webpack】-- 样式加载

    加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css- ...

  8. 2729: [HNOI2012]排队

    2729: [HNOI2012]排队 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 957  Solved: 449[Submit][Status] ...

  9. idea中编译项目报错 java: javacTask: 源版本 1.8 需要目标版本 1.8

    问题如上面所叙: > idea中编译项目报错 java: javacTask: 源版本 1.8 需要目标版本 1.8 解决方案: > Setting->Compiler->Ja ...

  10. Spring Boot HTTP over JSON 的错误码异常处理

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “年轻人不要怕表现,要敢于出来表现,但还是那句话,要有正确的度,你的表现是分析问题和解决问题的能 ...