<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. 开源一款资源分享与下载工具 —— 电驴（eMule）

    这里分享一款资源分享与下载工具--电驴,其实严格来说,应该叫电骡,这是我维护的版本,eMuleVeryCD版本,VeryCD是一个不错的资源分享网站:http://www.verycd.com/.大概 ...

  2. python删除list中元素的三种方法

    a.pop(index):删除列表a中index处的值,并且返回这个值. del(a[index]):删除列表a中index处的值,无返回值. del中的index可以是切片,所以可以实现批量删除. ...

  3. 2019ICPC南昌邀请赛网络赛 I. Max answer (单调栈+线段树/笛卡尔树)

    题目链接 题意:求一个序列的最大的(区间最小值*区间和) 线段树做法:用单调栈求出每个数两边比它大的左右边界,然后用线段树求出每段区间的和sum.最小前缀lsum.最小后缀rsum,枚举每个数a[i] ...

  4. 每天一个linux命令（文件操作）：【转载】find 命令的参数详解

    find一些常用参数的一些常用实例和一些具体用法及注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用.可以使用某种文件名模式来匹配文件 ...

  5. HDU3047 Zjnu Stadium 【带权并查集】

    HDU3047 Zjnu Stadium Problem Description In 12th Zhejiang College Students Games 2007, there was a n ...

  6. C#/.NET 读取或修改文件的创建时间和修改时间

    手工在博客中添加 Front Matter 文件头可是个相当费事儿的做法,这种事情就应该自动完成. .NET 中提供了非常方便的修改文件创建时间的方法,使用这种方法,能够帮助自动完成一部分文件头的编写 ...

  7. JanusGraph Server配置

    转自:https://www.cnblogs.com/jiyuqi/p/320267ff0b5052fad4613945e58ea1f1.html JanusGraph使用Gremlin Server ...

  8. Django中redis的使用方法(包括安装、配置、启动)

    一.安装redis: 1.下载: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 2.解压 tar -zxvf redis-3.2. ...

  9. promise的学习心得记录

    这里只讲promise,和async的使用方法,不会讲他们的原理. Promise 是异步编程的一种解决方案,可以用于取代传统的回调函数,该变那些函数层层嵌套调用的尴尬局面. 1)promise 基本 ...

  10. 自定义元素（custom elements）

    记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...