内容来自对《CSS世界》学习代码的理解简化：

<!DOCTYPE html>

<html>

<head>

<style>

div {

    padding-top: 20px;

    padding-bottom: 20px;

    text-align: center;

}

dot {

    display: inline-block;

    height: 1em;

    line-height: 1;

    text-align: left;

    vertical-align: -.25em;

    overflow: hidden;

}

dot::before {

    display: block;

    content: '...\A..\A.';

    white-space: pre-wrap;

    animation: dot 3s infinite step-start both;

}

@keyframes dot {

    33% { transform: translateY(-2em); }

    66% { transform: translateY(-1em); }

}

</style>

</head>

<body>

<div>正在加载中<dot>...</dot></div>

</body>

</html>

[TimLinux] CSS 实现加载中的动画的更多相关文章

  1. css实现加载中的效果

    那天闲着,学习了一下样式效果,自己实现了一个简单的加载中的效果 废话不多说,开始吧!! 一.实现一个圆环       要实现圆环,首先我们需要知道盒模型里面border的本质,先来看一个效果吧 从上面 ...

  2. 用纯CSS实现加载中动画效果

    HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...

  3. android image加载中等待动画

    在布局中添加一个ImageViw和一个EditText. <ImageView android:id="@+id/loading_imageView_info" androi ...

  4. CSS3实现加载中的动画效果

    本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...

  5. css 实现加载中3个点跳动

    <style type="text/css">.loading:after { overflow: hidden; display: inline-block; ver ...

  6. css3动画-加载中...

    写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...

  7. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  8. 用CSS实现加载的动画效果

    用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...

  9. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

随机推荐

  1. PHP Notice: Undefined index:解决方法

    PHP Notice:  Undefined index:解决方法 PHP Notice: Undefined index: 解决方法 <pre> if (empty(swoole_get ...

  2. python面向对象<三>

    类属性.实例属性: class Tool(object): #属性(类属性)类对象(Tool) num = 0 #方法 def __init__(self,new_name): self.name = ...

  3. k8s部署高可用Ingress

    部署高可用Ingress 官网地址https://kubernetes.github.io/ingress-nginx/deploy/ 获取ingress的编排文件 wget https://raw. ...

  4. linux系统LNMP环境部署

    源码安装 nginx# yum -y install gcc openssl-devel# useradd -s /sbin/nologin nginx# tar xf nginx-1.14.0.ta ...

  5. Oracle instant client免安装Oracle客户端配置

    不想安装几个G的完整版client,可以直接通过安装包安装的时候选择instant client,如果没有安装包,也可以直接去官网下载一个即时客户端,64位的windows包大小只有78MB左右 传送 ...

  6. 分组取topN

    假设有这样一个文件,文件内容如下 class1 class2 class1 class1 class2 class2 class1 class2 class1 class2 要求按照班级分组取出每个班 ...

  7. ubunit 16 安装pip

    pip是一个用来安装和管理python包的工具.已经内置到python2.7.9和python3.4及其以上的版本里. python2.7执行: sudo apt-get install python ...

  8. Freemarker + xml 实现Java导出word

    前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选择功能强大的freemarker+固定格式之后的wordxml实现导出功能.导出word的代码是可 ...

  9. PHP-会话控制Cookie和Session

    会话控制:就是为了我们在访问页面和页面之间的跳转是,能够识别到你的登录状态,已经你的登录时长等 在php的会话控制当中,涉及到两个概念Cookie和Session Cookie 会话控制 原理:在登录 ...

  10. IPv6，无需操作就可升级？

    最近这段时间,5G 出现在你能看到的各种信息里,铺天盖地的宣传提醒着大家新一代互联网的到来.其实早在几年前 5G 就有所提及,可是为什么到现在才开始窜上热门呢?这就涉及到了 IPv6. 或许有不少朋友 ...