<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box{

position: relative;

}

span{

position: absolute;

width: 30px;

height: 30px;

background: white;

border-radius: 50%;

}

span:nth-child(1){

-webkit-animation: a 1.5s infinite linear;

}

span:nth-child(2){

-webkit-animation: b 1.5s infinite linear;

}

@-webkit-keyframes a{

0%{-webkit-transform: translateX(0px); opacity: 1;}

50%{-webkit-transform: translateX(80px); opacity: 0.5;}

100%{-webkit-transform: translateX(0px); opacity: 1;}

}

@-webkit-keyframes b{

0%{-webkit-transform: translateX(80px); opacity: 1;}

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

100%{-webkit-transform: translateX(80px); opacity: 1;}

}

</style>

</head>

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

<div id="box">

<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. yxy-插入formid-并发/压力(入参的变量化)

    1.抓取接口如下 2.该接口为插入数据库操作,由于前段操作频繁,就简单压测一下 接口中formId.accountId.openId为变量 formId为随机生成插入:accountId.openId ...

  2. python爬虫入门（4）-补充知识：XPath 教程(转自w3school)

    http://www.w3school.com.cn/xpath/index.asp 参考手册:http://www.w3school.com.cn/xpath/xpath_functions.asp ...

  3. python pass关键字神奇吗

    参考文献:http://blog.sina.com.cn/s/blog_76e94d210100vz3e.html 1.空语句 do nothing2.保证格式完整3.保证语义完整 好吧!它什么也没干 ...

  4. 一个导出redis有序集合sorted-sets的shell脚本

    通过keys匹配需要导出的有序集合名称,这些集合命名格式为:*_010_09/Dec/2015 依次通过zscan导出有序集合中的数据,并分别保存 #/bin/shzset_pattern=”*_01 ...

  5. Servlet实现验证码图片（一）

    Servlet实现数字字母验证码图片(一): 生成验证码图片主要用到了一个BufferedImage类,如下:

  6. BZOJ1486 HNOI2009 最小圈 【01分数规划】

    BZOJ1486 HNOI2009 最小圈 Description 应该算是01分数规划的裸板题了吧..但是第一次写还是遇到了一些困难,vis数组不清零之类的 假设一个答案成立,那么一定可以找到一个环 ...

  7. svg图片的缩放拖拽

    svg是一种不错的矢量图,有时候我们会使用这样的图片来作为展示图,因为它不会因为放大缩小而失真. 好了,不扯淡了,废话少说,直入主题吧. 首先确定你是要深入学习还是要简单的把遇到的小任务解决一下,以后 ...

  8. ThinkPHP5 使用create 获取表单所有字段

    TP5没有 TP3的那个create创建表单字段,如果字段太多,写起来是非常麻烦 只需要在 框架里面 think/db/Query.php 里面加上函数 public function create( ...

  9. 使用distillery 构建专业的 phoenix 项目软件包

    备注:     首先需要安装 elixir 环境   1. 基本项目说明 参考项目: https://github.com/rongfengliang/phoenix-rest-demo 2. 项目说 ...

  10. Loadrunner录制脚本之浏览器

    Loadrunner录制脚本之浏览器 用Loadrunner录制脚本,尤其现在的IE浏览器版本升级较快,脚本的录制有时候还是需要集RP.Luck的,当然,Loadrunner对于IE的支持算最好的了, ...