渐进实现点点点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: expression(this.innerHTML = ‘...‘); /* IE7 */
}
.dotting:before { content: ‘...‘; } /* IE8 */
.dotting::before { content: ‘‘; }
:root .dotting { margin-right: 8px; } /* IE9+,FF,CH,OP,SF */

@-webkit-keyframes dot {
    25% { box-shadow: none; }
    50% { box-shadow: 2px 0 currentColor; }
    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
}
@keyframes dot {
    25% { box-shadow: none; }
    50% { box-shadow: 2px 0 currentColor; }
    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
}
HTML代码:
<a href="javascript:" class="grebtn">订单提交中<span class="dotting"></span></a>
时间: 2024-10-06 16:21:35

渐进实现点点点loading效果实例页面的相关文章

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% { wi

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

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

利用css3的animation实现点点点loading动画效果(二)

box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及class类名: 订单提交中<span class="dotting"></span> css代码 .dotting { display: inline-block; min-width: 2px; min-height: 2px; box-shadow: 2px 0 c

页面加载时的 Loading 效果

//页面加载时的 Loading 效果 $(window).load(function () { window.setTimeout(function () { $('body').removeClass('loading'); }, 1000); }); 上面的JS部分: HTML 部分 <body class="loading"> <div class="main"> </div></body> css .load

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" rel="stylesheet" type="t

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

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