<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. Kotlin Reference (五) Packages

    most from reference 包 源文件可以从包声明开始: package foo.bar fun baz() {} class Goo {} // ... 源文件的所有内容(如类和函数)都 ...

  2. 《Tomcat内核设计剖析》京东评论过百

    到京东看了下<Tomcat内核设计剖析>评论都一百多了,上个月也第二次印刷了,这里看下好评.中评和差评. 好评: 中评 对于中评,请看 为什么<写Tomcat内核设计剖析>,就 ...

  3. .Net快速获取网络文本文件最后一段文字-小应用

    场景 现在公司的测试环境一些文本日志不让接触,提供一个网络http服务器让人直接访问,这文件大时,一般10MB一个文件,不在同一局域网,网速限制200K,要等很久,访问很慢. .Net代码请求文本文件 ...

  4. PHP进程之信号捕捉中的declare(ticks=1)

    转自:http://blog.csdn.net/gavin_new/article/details/65629223 一. 语句在php中的意义 php中,declare(ticks=n)和regis ...

  5. JAVA多线程----用--死锁

    (1) 互斥条件:一个资源每次只能被一个进程使用.(2) 请求与保持条件:一个进程因请求资源而阻塞时,对已获得的资源保持不放.(3) 不剥夺条件:进程已获得的资源,在末使用完之前,不能强行剥夺.(4) ...

  6. 【备份】 解决acer v5 471g arch关机后自动重启的问题

    Fedora 17 on an Aspire V5-571 -- Reboot on Shutdown13 FEBRUARY 2015Update on 2/13/15: This article w ...

  7. 表单验证——jquery validate使用说明

    //validate 选项*********************************************************** $("form").validat ...

  8. 每天一个linux命令：【转载】mv命令

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1．命令格式: mv [选项] 源文件或目 ...

  9. CF1130E Wrong Answer

    E Wrong Answer 注意到 \(n\geq 2\) 时才可能有解,可以按如下方式构造一个 \(a_{1,2\dots n}\): 令 \(a_1=-1\) ,而后面的数都为正.记 \(s=\ ...

  10. from 验证

    /* 新版的页面控件值验证 @element 要验证的范围对象 @isValiMust 是否需要验证必填(临时保存的时候就不需要验证必填) @isByName 是否依赖name寻找控件 @return ...