<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. 文本数据预处理：sklearn 中 CountVectorizer、TfidfTransformer 和 TfidfVectorizer

    文本数据预处理的第一步通常是进行分词,分词后会进行向量化的操作.在介绍向量化之前,我们先来了解下词袋模型. 1.词袋模型(Bag of words,简称 BoW ) 词袋模型假设我们不考虑文本中词与词 ...

  2. SoftmaxWithLoss函数和师兄给的loss有哪些区别呢

    师兄的: NG教程中提到的:

  3. 【剑指offer】07重建二叉树，C++实现

    本博文是原创博文,转载请注明出处! # 本文为牛客网<剑指offer>刷题笔记 1.题目 # 输入某二叉树的前序遍历和中序遍历的结果,重建二叉树 2.思路(递归) # 前序遍历中,第一个数 ...

  4. [sklearn]性能度量之AUC值（from sklearn.metrics import roc_auc_curve）

    原创博文,转载请注明出处! 1.AUC AUC(Area Under ROC Curve),即ROC曲线下面积. 2.AUC意义 若学习器A的ROC曲线被学习器B的ROC曲线包围,则学习器B的性能优于 ...

  5. mysql的master和slave同步方案

    同步原理 master将改变记录到二进制日志(binary log)中 slave将master的binary log events拷贝到它的中继日志(relay log) slave重做中继日志中的 ...

  6. scrapy模拟浏览器爬取验证码页面

    使用selenium模块爬取验证码页面,selenium模块需要另外安装这里不讲环境的配置,我有一篇博客有专门讲ubuntn下安装和配置模拟浏览器的开发 spider的代码 # -*- coding: ...

  7. cell的循环利用

    方式1 // 1.先根据cell的标识去缓存池中查找可循环利用的cell UITableViewCell *cell = [tableView dequeueReusableCellWithIdent ...

  8. 记录一些WPF常用样式方便以后复用（转）

    TextBox文本框 <Style x:Key="TextBoxStyle1" BasedOn="{x:Null}" TargetType="{ ...

  9. riotjs 简单使用&&browserify 构建

    项目地址: http://riotjs.com/ 备注: 为了简单使用了 browserify 进行构建 1. 项目结构 ├── app.css ├── gulpfile.js ├── index.h ...

  10. Cucumber 使用例子

    1. junit 配置 @RunWith(Cucumber.class) @CucumberOptions(format ={"pretty","html:target/ ...