仅用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的使用方法. ...
随机推荐
- [Python] json 报错'xxx is not JSON serializable'的处理方法
predictions = self.model.predict(x_data, verbose=0)[0] y_pred_idx = np.argmax(predictions) y_pred_pr ...
- JavaScript class 使用
/********************************************************************* * JavaScript class 使用 * 说明: * ...
- Qt 4.8.5 jsoncpp lib
Qt jsoncpp lib 一.参考文档: . QtCreator动态编译jsoncpp完美支持x86和arm平台 http://www.linuxidc.com/Linux/2012-02/536 ...
- 【剑指offer】不分行从上到下打印二叉树，C++实现（层序遍历）
原创文章,转载请注明出处! 本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1.题目 从上往下打印出二叉树的每个节点,同层节点从左至右打印.例如: 图 不分行从上往下按层打印二叉 ...
- 51nod 1019 逆序数
在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是逆序 ...
- 阿里云简单的HTTPS配置
1, 在CA证书服务中购买证书,填写信息,之后[域名授权配置]. 域名授权配置有两种,一种是文件配置,一种是DNS配置,这里我选择DNS配置. 记录类型:TXT 主机记录:按照上图填写 记录值:按照上 ...
- 【requirejs】JS模块化工具requirejs教程
初识requirejs 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元 ...
- {Notes}{LaTeX}{enumerate}
\usepackage{enumerate} \begin{enumerate}{(1)} \setcounter{enumi}{2} % begin with 2 \item first \item ...
- python 中的异常处理
refer to: http://www.runoob.com/python/python-exceptions.html http://www.pythondoc.com/pythontutoria ...
- windows 2016 容器管理
1. docker-compose 安装 python 2.7 pip pip install docker-compose 常见问题: ...