仅用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的使用方法. ...
随机推荐
- ubuntu16扩展屏设置
new ubuntu system setting - Expansion screen settings. 1,System Settings–>Displays 1,set big scre ...
- java入门学习（6）—封装，继承，多态，this，super，初始代码块
1.[封装]:将对象的状态信息隐藏,不允许直接访问,而是通过该类提供的的方法阿里实现内部信息的访问和操作. 使用到的修饰符:private,不用修饰符(default),protected,publi ...
- java数组实现简单的DVD管理
package com; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanner; pub ...
- linux c++ 服务器端开发面试必看书籍
摘自别人博客,地址:http://blog.csdn.net/qianggezhishen/article/details/45951095 打算从这开始一本一本开始看 题外话: 推荐一个 githu ...
- caffe 学习记录1及网络结构
ubuntu git clone 默认在当前文件夹 caffe 基础了解:https://www.zhihu.com/question/27982282/answer/39350629 当然,官网才是 ...
- System.Net.FtpClient改进
项目用到Ftp,搜了下现有的类库System.Net.FtpClient 貌似比较不错. 一开始用着还行,但是有个FtpServer下有8k多内容,列表需要很久(7.8s)才能刷新出来. 翻源码吧,有 ...
- log4j的使用配置
1.与spring整合,web.xml中配置详情 <!-- 加载log4j的配置文件log4j.properties --> <context-param> <param ...
- BZOJ3529 [Sdoi2014]数表【莫比乌斯反演】
Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...
- ios 视图切换翻页效果
本文写的是视图切换,涉及到的内容有 1.实现代码添加Navigation Bar Toolbal: 2.实现在Navigation Bar和Toolbar上用代码添加Bar Button Item: ...
- 一个查看Cookie的便捷工具——EditThisCookie
Appium正在努力准备中,很快就要和大家见面了- 今天给大家分享一个查看cookies的工具,用fiddler总感觉有点麻烦,还乱七八糟的找不到到底哪个链接是当前网站的cookies: 首先,你用的 ...