仅用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的使用方法. ...
随机推荐
- D. Closest Equals(线段树)
题目链接: D. Closest Equals time limit per test 3 seconds memory limit per test 256 megabytes input stan ...
- android 获取 图片或视频略缩图
/** * 根据指定的图像路径和大小来获取缩略图 此方法有两点好处: 1. * 使用较小的内存空间,第一次获取的bitmap实际上为null,只是为了读取宽度和高度, * 第二次读取的bitmap是根 ...
- 细说C语言的优先级和结合性
Table0. 为什么要掌握优先级1. 优先级1.1 优先级图表1.2 运算符实例1.3 优先级顺口溜2. 结合性3. 参考资料 写代码的时候,常会翻看的一个表就是“c语言运算符优先级表”.c的运算符 ...
- crt,excrt学习总结
\(crt,Chinese\ Remainder\ Theorem\) 概述 前置技能:同余基础性质,\(exgcd\). \(crt\),中国剩余定理.用于解决模数互质的线性同余方程组.大概长这样: ...
- Roslyn 的确定性构建
注意到每次编译完之后,你的 dll 或者 exe 是不一样的吗?本来这并没有什么大不了的,但大家都知道数字和鹅厂的安全软件遍布在我们大(tiān)陆(cháo)地区的大量电脑上,它们的查杀策略是——凡 ...
- MD5加盐加密
package com.chauvet.utils; import java.security.NoSuchAlgorithmException; import java.util.Random; / ...
- Xcode ARC需要什么版本的环境支持
Mac OS X v10.6 和 v10.7 (64位应用) 的Xcode 4.2以上版本支持ARC,iOS 4 和 iOS 5 下ARC都能工作,但Weak不支持Mac OS X v10.6 和 i ...
- CSS基本样式简单介绍
具体详情内容请查阅<css参考手册> 一.基本结构样式 width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 ...
- OpenCL入门
初入OpenCL,做个记录. 在Windows下开发OpenCL程序,必须先下载OpenCL的SDK,现在AMD,NVIDIA,Intel均提供各自的OpenCL库,基本是大同小异.安装好SDK后新建 ...
- for, while的用法
for循环求1+2+3+4+....+100 # include <stdio.h> int main(void) { int i; //循环中更新的变量i不能定义成浮点型 ; ; i&l ...