<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. React-Native进阶_3.触摸高亮显示TouchableHighlight

    在安卓原生ListView  点击 其中一个子视图时,会有高亮效果,这个效果在ReactNative 中通过TouchableHighlight 实现,具体使用如下 4.触摸高亮显示 Touchabl ...

  2. sql基础语法复习（二）-- 分组，连接的使用

    一.深入学习  group by group by ,分组,顾名思义,把数据按什么来分组,每一组都有什么特点. 1.我们先从最简单的开始: select count(*) from tb1 group ...

  3. HDU 3345

    http://acm.hdu.edu.cn/showproblem.php?pid=3345 最近重写usaco压力好大,每天写的都想吐.. 水一道bfs 注意的是开始旁边有敌人可以随便走,但是一旦开 ...

  4. SAP NetWeaver Business Client (NWBC) 简介

    1.NWBC 简介 SAP NetWeaver Business Client (NWBC) 是新一代SAP用户界面,集成了SAPGUI事务和新的web dynpro应用,类似于桌面应用程序. SAP ...

  5. 【剑指offer】把二叉树打印成多行，C++实现

    原创文章,转载请注明出处! 本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1.题目       从上到下按层打印二叉树,同一层结点从左至右输出,每一层输出一行.例如:下面二叉树的 ...

  6. 获取css最终样式

    function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { retur ...

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

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

  8. stm32寄存器版学习笔记06 输入捕获(ETR脉冲计数)

    STM32外部脉冲ETR引脚:TIM1-->PA12;TIMER2-->PA0:TIMER3-->PD2;TIMER4-->PE0… 1.TIM2 PA0计数 配置步骤 ①开启 ...

  9. 利用 netsh 给 mysql 开启多端口监听

    利用 netsh 给 mysql 开启多端口监听 标题党,实际并不是真的多端口监听,只是端口转发而已. 由于某种特殊原因需要 mysql 服务器多个端口监听. mysql 服务器本身是不支持的,但可以 ...

  10. [LeetCode系列]子集枚举问题[有重复元素]

    给定一组数(未排序, 可能有重复元素), 求出所有可能的组合. 算法和无重复元素的相似. 唯一需要注意的是, 如果当前的数字和之前的相同, 算法就只会在结尾数字是此数字的组合后加上此数字. 比如现在是 ...