animation渐进实现点点点等待效果实例页面

CSS代码:
.ani_dot {
    font-family: simsun;
}
:root .ani_dot {
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
}
@-webkit-keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    -webkit-animation: dot 3s infinite step-start;
}

@keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    animation: dot 3s infinite step-start;
}
HTML代码:
<a href="javascript:" id="submit" class="grebtn">提交订单</a>
JS代码:
$("#submit").bind("click", function() {
    if (!this.ajaxing) {
        this.ajaxing = true;
        this.innerHTML = ‘提交订单中<span class="ani_dot">...</span>‘;
        setTimeout(function() {
            this.ajaxing = false;
            this.innerHTML = "提交超时";
        }.bind(this), 30000);
    }
});
时间: 2024-11-09 05:12:56

animation渐进实现点点点等待效果实例页面的相关文章

animation渐进实现点点点等待效果

<style> @keyframes dot { 0% { width: 0; } 33% { width: .2em; } 66% { width: .5em; } 100% { width: .8em; } } .dot { display: inline-block; width: 20px; vertical-align: bottom; overflow: hidden; -webkit-animation: dot 3s infinite step-start; } </st

渐进实现点点点loading效果实例页面

CSS代码: .dotting { display: inline-block; min-width: 2px; min-height: 2px; box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; -webkit-animation: dot 4s infinite step-start both; animation: dot 4s infinite step-start both; *zoom:

数据处理等待效果实例代码

数据处理等待效果实例代码:在很多网站有数据处理等待效果,比如当数据正在加载或者其他处理活动的时候,会有一个特别的页面或者图标来说明数据正在处理,这样更加人性化,下面是一段代码片段,希望能够给大家带来一定的帮助.代码如下: $.ajax({ url:"url", data:dates, beforeSend:function(){ var h=document.body.clientHeight; $("<div class=\"datagrid-mask\&q

CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

在css中vw和vh分别代表所占的百分比,可以设置最外部的容器的宽高,但是都要结合百分比一起使用. 展示 回到相关文章 ? 图片宽度(目前1024像素): 128  1024 点击我出现图片弹框 代码CSS代码:.dialog_container {    display: none;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    background-color: rgba(0,0,0,.35); 

鼠标hover元素scale/zoom中心点放大效果实例页面

CSS代码: .box { /* 可见视觉区域 */ width: 480px; height: 250px; position: relative; overflow: hidden; cursor: pointer; } .size { /* 广阔的海洋 */ width: 1000px; height: 1000px; position: absolute; left: 50%; top: 50%; margin: -500px 0 0 -500px; /* 水平居中 */ text-al

按钮倒计时可用效果实例代码

按钮倒计时可用效果实例代码:很多网页都有这样的效果,那就是按钮必须在指定的倒计时之后才是可用的,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

动画组合(uber启动时的等待效果)

动画组合(uber启动时的等待效果) by 伍雪颖 - (void)startAnimation { self.layer.masksToBounds = 0; self.layer.cornerRadius = 50; if (self.layer.sublayers == nil) { [self setUpAnimation]; } self.layer.speed = 1; } - (void)setUpAnimation { CABasicAnimation *posAnim = [C

HTML5开发的翻页效果实例

简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20thingsilearned.com)的web app的宣传教育.这个项目最主要的思想是在传达,用web展现电子书的内容是最合适的选择.因为展现电子书的内容是前所未有的web技术,我们坚信以现在的技术完全可以用一个容器来展现这样的例子. 书籍的封面同时也是<20 Things I Learned Abou

实现密码框默认文字效果实例代码

实现密码框默认文字效果实例代码:大家都知道很多文本框在默认情况下都有默认的提示文本,例如"请输入姓名"之类的语言,当点击文本框的时候,会清除提示语,比较人性化.但是在密码框中实现此效果可能就有点麻烦了,因为密码框不是以明文显示的,下面就介绍一下代码实例解决此问题.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="