仅用CSS3创建h5预加载双旋圈
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
position: relative;
}
span{
position: absolute;
border: 8px solid #fff;
border-top: 8px solid transparent;
border-radius: 50%;
}
span:nth-child(1){
width: 80px;
height: 80px;
-webkit-animation: a 1s infinite linear;
}
span:nth-child(2){
width: 40px;
height: 40px;
left: 20px;
top: 20px;
-webkit-animation: b 0.5s infinite linear;
}
@-webkit-keyframes a{
0%{-webkit-transform: rotate(360deg); opacity: 1;}
50%{-webkit-transform: rotate(180deg); opacity: 0.5;}
100%{-webkit-transform: rotate(0deg); opacity: 1;}
}
@-webkit-keyframes b{
0%{-webkit-transform: rotate(0deg); opacity: 0.5;}
50%{-webkit-transform: rotate(180deg); opacity: 1;}
100%{-webkit-transform: rotate(360deg); opacity: 0.5;}
}
</style>
</head>
<body style="background-color: rosybrown;">
<div id="box">
<span></span>
<span></span>
</div>
</body>
仅用CSS3创建h5预加载双旋圈的更多相关文章
- 仅用CSS3创建h5预加载雷达圈
<head> <meta charset="UTF-8"> <title></title> <style type=" ...
- 仅用CSS3创建h5预加载跳动圈
<head> <meta charset="UTF-8"> <title></title> <style type=" ...
- 仅用CSS3创建h5预加载交错圈
<head> <meta charset="UTF-8"> <title></title> <style type=" ...
- 仅用CSS3创建h5预加载旋转圈
<head> <meta charset="UTF-8"> <title></title> <style type=" ...
- 移动端-H5预加载页面
利用简洁的图片预加载组件提升h5移动页面的用户体验 阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...
- h5预加载代码
预加载 <!--预加载--> <div class="preload"> <div class="prezoom"> < ...
- Flex 4 自定义预加载器
本示例的目的是在Flash Professional里创建自定义预加载器SWC,并扩展SparkDownloadProgressBar类在Flex 4应用程序中使用. 预加载器显示加载进度百分比 ...
- 通过link的preload进行内容预加载
Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...
- Flying Pages：在单击之前预加载页面，打开网页快得飞起
Flying Pages能够实现:在用户点击网页的链接之前,就预加载这个网页,当再点击这个网页时,页面便能飞速打开,能为网站优化加分.接下来,就由LOYSEO来讲解Flying Pages的使用方法. ...
随机推荐
- 《Effective Java》读书笔记（二）之对于所有对象都通用的方法
第八条 在改写equals的时候请遵守通用约定 一般以下几种情况,不适宜覆盖equals方法 1.类的每个实例本质上都是唯一的,对于代表活动实体而不是值的类确实如此,例如Thread. 2.不关心类是 ...
- ss-libev 源码解析local篇(3): server_recv_cb之SNI和STAGE_PARSE
上一篇看到STAGE_HANDSHAKE中的处理,到发出fake reply.这之后会从socks5 request中解析出remote addr and port,即客户端实际想要访问的服务器地址和 ...
- 老男孩Linux运维期中架构
- Ethernet、VLAN、QinQ
以太网帧格式: 各字段解释: DMAC:目的MAC地址,该字段确定帧的接收者. SMAC:源MAC地址,该字段标识发送帧的工作站. Type:上层协议类型(0x0800:IP;0x0808:ARP;0 ...
- BZOJ：5457: 城市(线段树合并)（尚待优化）
5457: 城市 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 18 Solved: 12[Submit][Status][Discuss] Des ...
- 【java基础】Java运算符优先级
Java运算符优先级 序列号 符号 名称 结合性(与操作数) 目数 说明 1 . 点 从左到右 双目 ( ) 圆括号 从左到右 [ ] 方括号 从左到右 2 + 正号 从右到左 单目 - 负号 ...
- python 时间日期处理
refer to : http://www.wklken.me/posts/2015/03/03/python-base-datetime.html#datetime-string http://ww ...
- 关于python中的循环
参考下面这一篇: http://www.cnblogs.com/vamei/archive/2012/05/30/2526357.html 其中用range的方式最好!
- WPF 竖排文字（转）
---恢复内容开始--- 想做一个WPF 文字竖排 类似上图.用在TabItem的header上面. <TextBlock FontSize="30" Text=" ...
- chrome扩展程序开发之在目标页面执行自己的JS
大家都知道JS是执行在client的.所以,假设我们自己写一个浏览器的话.是一定能够往下载下来的网页源码中加入js的.可惜我们没有这个能力.只是幸运的是,chrome的扩展程序能够帮我们做到这件事. ...