<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. mysql连接踩坑

    本机安装的是wamp,集成了mysql.php.apache.安装了sqlyog客户端. 1.错误代码2003 证明mysql服务没有开启,此时需要开启mysql服务,开启了wamp 2.错误代码10 ...

  2. EasyDSS流媒体服务器实现RTMP直播同步HLS录像和时移回放

    本文转自EasyDarwin团队成员Alex的博客:http://blog.csdn.net/cai6811376/article/details/74166337 "目前在市面上可以找到的 ...

  3. "PEP:8 expected 2 blank lines ，found 1"

    pycharm shows "PEP:8 expected 2 blank lines ,found 1" 用pycharm写python的时候,总会在def function() ...

  4. vue中使用less

    我们需要下载less对应的依赖包 第一步: 安装less依赖,npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置load ...

  5. Linux运行环境搭建（一）——安装JDK

    下载Linux版jdk 官网:http://www.oracle.com/technetwork/java/javase/downloads/index.html 解压并拷贝到指定目录 tar zxv ...

  6. Java [Leetcode 384]Shuffle an Array

    题目描述: Shuffle a set of numbers without duplicates. Example: // Init an array with set 1, 2, and 3. i ...

  7. Java多线程小例子(三个窗口卖火车票)

    class Ticket implements Runnable{ private int TicketNum = 100; //100张火车票 private boolean flag = true ...

  8. Redis 列表 List 主要操作函数

    /** * redis 列表 List Redis列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素导列表的头部(左边)或者尾部(右边) */ //lpush 新增一个列,多个列可以用空格隔 ...

  9. 船长带你看书——《selenium2 python 自动化测试实战》（2）浏览器操作

    浏览器操作 # coding: utf-8 from selenium import webdriver from time import sleep driver = webdriver.Firef ...

  10. 获得消息的x，y的窗口内坐标（包括边框和titlebar高度

    rectWindow = D2D.GetWindowRect(self.hwnd)#窗口大小 rectClient = D2D.GetWindowRect(self.hwnd,True)#客户区大小 ...