<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box{

width: 400px;

height: 400px;

margin: 100px auto 0;

position: relative;

}

span{

position: absolute;

width: 16px;

height: 16px;

border-radius: 50%;

background: #fff;

-webkit-animation: a 1s infinite linear;

}

span:nth-child(1){

left: 0px;

-webkit-animation-delay: 0s;

}

span:nth-child(2){

left: 20px;

-webkit-animation-delay: 0.25s;

}

span:nth-child(3){

left: 40px;

-webkit-animation-delay: 0.5s;

}

span:nth-child(4){

left: 60px;

-webkit-animation-delay: 0.75s;

}

span:nth-child(5){

left: 80px;

-webkit-animation-delay: 1s;

}

@-webkit-keyframes a{

0%{-webkit-transform: translateY(0px); opacity: 0.5;}

50%{-webkit-transform: translateY(-30px); opacity: 1;}

100%{-webkit-transform: translateY(0px); opacity: 0.5;}

}

</style>

</head>

<body style="background-color: royalblue;">

<div id="box">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

</body>

仅用CSS3创建h5预加载跳动圈的更多相关文章

  1. 仅用CSS3创建h5预加载雷达圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  2. 仅用CSS3创建h5预加载交错圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  3. 仅用CSS3创建h5预加载双旋圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  4. 仅用CSS3创建h5预加载旋转圈

    <head> <meta charset="UTF-8"> <title></title> <style type=" ...

  5. 移动端-H5预加载页面

    利用简洁的图片预加载组件提升h5移动页面的用户体验   阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...

  6. h5预加载代码

    预加载 <!--预加载--> <div class="preload"> <div class="prezoom"> < ...

  7. Flex 4 自定义预加载器

    本示例的目的是在Flash Professional里创建自定义预加载器SWC,并扩展SparkDownloadProgressBar类在Flex 4应用程序中使用.    预加载器显示加载进度百分比 ...

  8. 通过link的preload进行内容预加载

    Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...

  9. Flying Pages：在单击之前预加载页面，打开网页快得飞起

    Flying Pages能够实现:在用户点击网页的链接之前,就预加载这个网页,当再点击这个网页时,页面便能飞速打开,能为网站优化加分.接下来,就由LOYSEO来讲解Flying Pages的使用方法. ...

随机推荐

  1. flowable FormEngine和FormEngineConfiguration

    FormEngineConfiguration 继承自 AbstractEngineConfiguration. 一.获得实例 FormEngineConfiguration提供了7个公开的静态方法: ...

  2. Java基础面试题 (一)

    1.面向对象的三个特征 封装,继承,多态.这个应该是人人皆知,有时候也会加上抽象. 2.多态的好处 允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不同的行为方式(发送消息 ...

  3. 如何定位BAD_ACCESS

    1.访问了野指针,比如对一个已经释放的对象执行了release.访问已经释放对象的成员变量或者发消息. 死循环 如何调试BAD_ACCESS错误 1.重写object的respondsToSelect ...

  4. vue运行原理

    Vue工作原理小结 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简 ...

  5. Python递归输出字典所有不同深度的路径

    应用场景 假设有这样一个字典结构test_dict = {'a':{'b':{'c':1}},'d':2},test_dict其实可以看作是一种树状结构,其中每个叶子节点深度不一定相同,如果我们希望输 ...

  6. 揭示同步块索引（上）：从lock开始

    转自:http://www.cnblogs.com/yuyijq/archive/2009/03/13/1410071.html 大家都知道引用类型对象除实例字段的开销外,还有两个字段的开销:类型指针 ...

  7. Maven系列（一）之初识Maven

    Maven是个啥? Maven主要服务于基于Java平台的项目构建.依赖管理和项目信息管理,并且Maven是跨平台的,这意味着无论是在Windows上,还是在Linux或者Mac上,都可以使用同样的命 ...

  8. 搭建Hadoop2.6.0+Eclipse开发调试环境(以及log4j.properties的配置)

    上一篇在win7虚拟机下搭建了hadoop2.6.0伪分布式环境.为了开发调试方便,本文介绍在eclipse下搭建开发环境,连接和提交任务到hadoop集群. 1. 环境 Eclipse版本Luna ...

  9. python 正则表达式字符说明

    . 元字符 说明 . 代表任意字符 | 逻辑或操作符 [ ] 匹配内部的任一字符或子表达式 [^] 对字符集和取非 - 定义一个区间 \ 对下一字符取非(通常是普通变特殊,特殊变普通) * 匹配前面的 ...

  10. Appium定位 5 ——xpath

    今天我们先来和大家说一下appium,上一次说到了定位,不知道大家定位的怎么样了,今天来说如何定位xpath,五分钟即可学会: 例1: 现在我想定位下面这个登录按钮: xpath该怎么写呢? 先不管三 ...