<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. oracle的JOB

    前文再续,上面说的oracle的JOB,近期有些体会,记录一下: 零.创建JOB 创建JOB 1)创建一个存储过程.逻辑处理都在这个存储过程里面. 2)创建一个JOB运行此存储过程 -- 创建tabl ...

  2. This is very likely to create a memory leak. Stack trace of thread

    1.错误描述 警告: The web application [cmp] appears to have started a thread named [Abandoned connection cl ...

  3. EasyDSS流媒体服务器Linux emerg getpwnam("xxx") failed解决办法

    本文转自EasyDarwin开源团队Alex的博客:http://blog.csdn.net/cai6811376/article/details/73770943 EasyDSS 流媒体服务器是什么 ...

  4. 求序列完美度(trie+贪心)

    题目链接: 求序列完美度 题目描述 给出由n个数组成的序列s,规定第i个数s[i]到第j个数s[j]组成的子序列的完美度为该子序列中所有数的和与任意一个不在该子序列中的数进行异或运算得到的值中的最大值 ...

  5. No form of payment has been added yet.

    You may select a form of payment after your account balance reaches $10.00. Learn more 显然是说达到10美元以后才 ...

  6. Echart--百度地图（散点图）

    参考:http://blog.csdn.net/xieweikun7/article/details/52766676 1.首先,下载嘛 Echarts http://echarts.baidu.co ...

  7. js之隔行换色

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  8. CFE Bootloader详解 — 引导过程

    CFE命令 CFE引导过程 系统加电后,CFE从boot.S (src/shared/boot.S)开始执行,完成判断芯片类型.设置时钟.初始化缓存.把自身加载进RAM等任务后,跳转到c_main() ...

  9. 使用Percona Xtrabackup创建MySQL slave库

    一.使用Percona Xtrabackup创建MySQL slave库 MySQL Server 版本: Server version: 5.7.10-log MySQL Community Ser ...

  10. C++头文件预编译与命名空间使用方法

    宏指令的预编译用法,用于多文件的头文件预编译判断 头文件代码: #include <iostream> #ifndef XB_H//预编译判断XB_H代码段是否被执行 #define XB ...