<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. EasyRTMP+EasyRTSPClient实现的多路(支持断线重连)RTSP转RTMP直播推流工具

    本文转自EasyDarwin开源团队成员Kim的博客:http://blog.csdn.net/jinlong0603/article/details/73441405 介绍 EasyRTMP是Eas ...

  2. C# 加密狗 超级狗 加密程序 程序授权示例 程序授权验证

    本篇针对超级狗进行讲解,对应的超级狗套件的工具包版本为2.4版本.超级狗图片如下: 主要包含两个狗,一个是超级狗,一个是开发狗,在本博文中都是必须的.首先先安装光盘中的开发套间. 接下来就开始演示一个 ...

  3. Visual Studio Community 版本过期

    /********************************************************************* * Visual Studio Community 版本过 ...

  4. js获得分辨率

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. 初次使用git遇到的问题总结

    第一次使用git时,遇到好多问题,但也都是小问题,下边我把这些问题总结一下. 问题一: 创建远程仓库的时候,如果你勾选了Initialize this repository with a README ...

  6. Session学习

    Session学习 Session的作用就是在服务器端保存一些用户的数据,然后传递给用户一个名字为JSESSIONID的Cookie,这个JESSIONID对应这个服务器中的一个Session对象,通 ...

  7. BZOJ3673 可持久化并查集 by zky 【主席树】

    BZOJ3673 可持久化并查集 by zky Description n个集合 m个操作 操作: 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a ...

  8. svg图片的缩放拖拽

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

  9. win8.1下安装双系统ubuntu14.04.3

    一.去ubuntu官网下载长期支持版的系统,64位还是32位由物理内存而定,4G以下用32位,4G以上(包括4G)使用64位. 二.若64位的系统,下载下来的文件名应该是ubuntukylin-14. ...

  10. h5移动端flexible源码适配终端解读以及常用sass函数

    ;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.docu ...