<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. js中top、self、parent

    1.在应用iframe或者frameset的时候 parent指的是父窗口.top指的是顶级的窗口.self指的是当前的窗口-window window.self 功能:是对当前窗口自身的引用.它和w ...

  2. angularjs 缓存

    设置缓存请求的数据:只有请求URL不变,就不会重新发请求 设置带定时时间的缓存: .factory('cacheInterceptor', ['$cacheFactory', '$timeout', ...

  3. iOS9的新特性以及适配方案-----转载

    2015年9月8日,苹果宣布iOS 9操作系统的正式版在太平洋时间9月16日正式推出,北京时间9月17日凌晨1点推送. 新的iOS 9系统比iOS8更稳定,功能更全面,而且还更加开放.iOS 9加入了 ...

  4. yum安装php5.5，php5.6和php7.0

    本文主要介绍在CentOS系统下的php多个版本的安装使用 1.清理系统上的旧版本php 1)查询已安装的php软件 rpm -qa|grep php* yum list installed | gr ...

  5. BZOJ4818 LOJ2002 SDOI2017 序列计数 【矩阵快速幂优化DP】*

    BZOJ4818 LOJ2002 SDOI2017 序列计数 Description Alice想要得到一个长度为n的序列,序列中的数都是不超过m的正整数,而且这n个数的和是p的倍数. Alice还希 ...

  6. python 抓取网页一部分

    import re import requests from bs4 import BeautifulSoup response = requests.get("https://jecvay ...

  7. Tencent Server Web(TSW) 腾讯开源的nodejs 基础设施

      Tencent Server Web(TSW),是一套面向WEB前端开发者,以提升问题定位效率为初衷,提供染色抓包.全息日志和异常发现的Node.js基础设施.TSW关注业务的运维监控能力,适用于 ...

  8. 2.Python输入pip命令出现Unknown or unsupported command 'install'问题解决

    1.在学习python时,输入pip命令的时候出现以下错误: 2.原因:输入where pip命令查找,发现结果如下图,原因是因为电脑原先装了LoadRunner,导致系统无法识别应该使用哪一个pip ...

  9. elasticsearch 6.0.0及之后移除了一个索引允许映射多个类型的操作（Removal of mapping types）

    分给线一下内容为理解错误内容,实际允许建立父子分档,只是类型改成来 join 官方demo: join datatypeedit The join datatype is a special fiel ...

  10. STL容器——对map排序

    STL容器(三)——对map排序 对于map的排序问题,主要分为两部分:根据key排序:根据value排序.下面我们就分别说一下~ 1. 根据key进行排序 map默认按照key进行升序排序 ,和输入 ...