仅用CSS3创建h5预加载跳动圈
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 400px;
height: 400px;
margin: 100px auto 0;
position: relative;
}
span{
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
-webkit-animation: a 1s infinite linear;
}
span:nth-child(1){
left: 0px;
-webkit-animation-delay: 0s;
}
span:nth-child(2){
left: 20px;
-webkit-animation-delay: 0.25s;
}
span:nth-child(3){
left: 40px;
-webkit-animation-delay: 0.5s;
}
span:nth-child(4){
left: 60px;
-webkit-animation-delay: 0.75s;
}
span:nth-child(5){
left: 80px;
-webkit-animation-delay: 1s;
}
@-webkit-keyframes a{
0%{-webkit-transform: translateY(0px); opacity: 0.5;}
50%{-webkit-transform: translateY(-30px); opacity: 1;}
100%{-webkit-transform: translateY(0px); opacity: 0.5;}
}
</style>
</head>
<body style="background-color: royalblue;">
<div id="box">
<span></span>
<span></span>
<span></span>
<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的使用方法. ...
随机推荐
- 3PC
3PC,是Three-Phase Commit的缩写,即三阶段提交,是2PC的改进版,其二阶段提交协议的"提交事务请求"过程一分为二,形成了由CanCommit,PreCommit ...
- Unity 播放 带 alpha 通道的视频（Video Player组件）
孙广东 2017.6.18 http://blog.csdn.NET/u010019717 通常是 .webm类型文件!!!!! 你可以下载这个文件到本地: Http://tsubakit1.s ...
- Vim技能修炼教程(12) - Vim的脚本语言支持
Vim的脚本语言支持 本节开始,我们正式接触vimscript这门古老的脚本语言. 首先要说明,vim支持的扩展语言很多,比如python, python3, ruby, lua,tcl等常见脚本语言 ...
- [Linux] 使用rename批量重命名文件
例如把所有png文件的后缀改为jpg $ rename 's/png/jpg/' *png
- SQL基础五（作业代码）
create database stuinfo create table student ( mid ) not null primary key, mname ) not null ) create ...
- Docker及常用操作
镜像.容器和仓库 Docker镜像: 镜像是一个只读的模板,可以用来创建Docker容器.可以直接创建一个镜像,或者是更新已有镜像,或者复制他人的镜像直接使用. Docker容器: 容器是镜像的实例, ...
- IOS开发 清空数组正确方法
NSArray以及NSMutableArray 在Objc中的两种数组(不可变数组和可变数组), 在日常开发中,经常会遇到需要清空数组的情况,很多人下意识的会想到nil这个方法,这里是不提倡的.因为如 ...
- learn go memoization
package main // 参考文章: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/06.12.md i ...
- 项目文件中的已知 NuGet 属性（使用这些属性，创建 NuGet 包就可以不需要 nuspec 文件啦）
知道了 csproj 文件中的一些常用 NuGet 属性,创建 NuGet 包时就可以充分发挥新 Sdk 自动生成 NuGet 包的优势,不需要 nuspec 文件啦.(毕竟 nuspec 文件没有 ...
- 在 Windows 安装期间将 MBR 磁盘转换为 GPT 磁盘
以 UEFI 启动的 Windows 磁盘必须是 GPT 格式.本文将介绍如何在安装 Windows 期间将磁盘从 MBR 转换成 GPT. 特别注意:操作不慎可能丢失所有数据,如果你懂得安装系统的一 ...