仅用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的使用方法. ...
随机推荐
- CSDN博客积分规则
1.博客积分规则 博客积分是CSDN对用户努力的认可和奖励,也是衡量博客水平的重要标准.博客等级也将由博客积分唯一决定.积分规则具体如下: 每发布一篇原创或者翻译文章:可获得10分: 每发布一篇转载文 ...
- [Linux] 终端设置只显示当前目录及终端美化
1．只显示当前目录 vim ~/.bashrc 找到位置: if [ "$color_prompt" = yes ]; then PS1='${debian_chroot:+($d ...
- sql server不能删除数据库，显示错误：正在使用
解决办法: use mastergoalter database database_name set single_user with rollback immediate --将数据库回滚到原始配置 ...
- baos bais 意义
import java.io.BufferedInputStream; import java.io.ByteArrayInputStream; import java.io.ByteArrayOut ...
- 安装伪分布式hbase 0.99.0
查看是否启动成功,输入jps,看到有HMaster和HQuorumPeer,浏览器输入http://localhost:16030/master-status,能打开说明成功 hbase(main): ...
- Linux下定时任务Crontab的使用
使用crontab你可以在指定的时间执行一个shell脚本或者一系列Linux命令.例如系统管理员安排一个备份任务使其每天都运行 入门 # crontab –e 这样可以已编辑模式打开个人的cro ...
- JSON 总结
<!--Json格式配置映射 直接能访问JSON文本数据--> <system.webServer> <staticContent> <mimeM ...
- 接口测试框架——第四篇-url、excel内容等
到现在为止,发送邮件(email_module).读excel(excel_module).发送requests(requests_module).常量(setting)我们都已经完成了,看看第一篇中 ...
- vs2013 快捷键
//////////////// 编辑: ctrl+-(shift+ctrl+-):移动光标到上次位置或相反,比如定位一个函数,转到函数定义后想回到函数使用处,则用ctrl+-,若又想回到函数 ...
- gradle 配置java 项目maven 依赖
1. 内置的 repositories { mavenCentral() } 2. maven 私服 repositories { maven { url "http://maven.al ...