javascript,css3加载动画
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<title>我的推广</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fontsize.js"></script>
<link href="css/join.css" rel="stylesheet">
</head>
<body style="background:url(images/bg3.png) no-repeat center;background-size: 100% 100%;"> <script type="text/javascript">
(function () {
var body = document.getElementsByTagName('body')[0];
var loader = document.createElement('div');
loader.className = 'spinner-container';
loader.innerHTML = '<div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div><span class="dy-page-loader-text">正在加载</span>';
body.appendChild(loader);
window.onload = function () { setTimeout(function () {
loader.style.display = 'none';
}, 500);
};
})();
</script>
<!-- form -->
<section class="form" id="form">
<form class="join-form" id="join-form">
<span class="title ">我的推广</span>
<ul>
<li>
<span class="s-title">推广链接：</span>
<span class="s-link" onclick="window.location='join-<?php echo $user->user_id;?>.html'">我的推广链接</span>
</li>
</ul>
<div class="s-vip">
<span class="v-title">我的推广会员</span>
<ul>
<?php
foreach($relation_list as $val)
{
?>
<li>
<span class="v-name">
<?php echo $val['open']->name;?></span>
<span class="v-flag">
<?php echo $status[$val['open']->status];?></span>
</li>
<?php } ?></ul>
</div>
</form>
</section>
</body>
</html>
javascript
<script type="text/javascript">
(function () {
var body = document.getElementsByTagName('body')[0];
var loader = document.createElement('div');
loader.className = 'spinner-container';
loader.innerHTML = '<div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div><span class="dy-page-loader-text">正在加载</span>';
body.appendChild(loader);
window.onload = function () { setTimeout(function () {
loader.style.display = 'none';
}, 500);
};
})();
</script>
css3
.spinner-container{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1001;
background-color: #f7f7f7;
}
.spinner-container .spinner {
margin: 8rem auto 0;
width: 7rem;
text-align: center;
}
.spinner-container span{
text-align: center;
font-size: 0.8rem;
color:#666;
margin-top:1rem;
}
.spinner-container .spinner > div {
width: 26px;
height: 26px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner-container .spinner .bounce1{
background: #0dcda7
}
.spinner-container .spinner .bounce2{
background: #cda812
}
.spinner-container .spinner .bounce3{
background: #d52017
}
.spinner-container .spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner-container .spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
转载自：http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
javascript,css3加载动画的更多相关文章
- 纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- CSS3加载动画
图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图: 图2 代码: 使用1个名为'l ...
- css3 加载动画效果
Loading 动画效果一 HTML 代码: <div class="spinner"> <div class="rect1&quo ...
- css3 加载动画
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- 炫酷CSS3加载动画
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8&qu ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
随机推荐
- "客户端无法连接到远程计算机"错误的解决方法
问题: 客户端无法连接到远程计算机. 可能没有启用远程连接或者计算机太忙不能接受新的连接. 也可能是网络问题阻止连接.请稍后重新尝试连接. 如果问题仍然存在 请与管理员联系. 解决方法: 1.首先确认 ...
- J2EE 基础知识积累
1. 面向对象的思维: 1. 有哪些类 那些对象 2. 这些类中,每种类应该具有某种属性和方法 3. 考虑类与类之间应该具有什么样的关系 3. 1. 成员变量可以使用java语言中 ...
- python Tips(不定期更新）
dictionary sort 1.根据key排序,正向排序 sorted(dic.items(), key=lambda d: d[0]) 2.根据value排序,反向排序 sorted(dic.i ...
- [linux] linux知识积累（不断更新中…）
一.vim知识 f(find)命令也可以用于移动,fx将找到光标后第一个为x的字符,3fd将找到第三个为d的字符. D 删除当前字符至行尾.D=d$ :split或new 打开一个新窗口,光标停在顶层 ...
- Java 网络编程---分布式文件协同编辑器设计与实现
目录: 第一部分:Java网络编程知识 (一)简单的Http请求 一般浏览网页时,使用的时Ip地址,而IP(Internet Protocol,互联网协议)目前主要是IPv4和IPv6. IP地址是一 ...
- HDU 4009 Transfer water
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4009 题意:给出一个村庄(x,y,z).每个村庄可以挖井或者修建水渠从其他村庄得到水.挖井有一个代价, ...
- .NET自动字符编码识别程序库 NChardet
什么是NChardet NChardet是mozilla自动字符编码识别程序库chardet的.NET实现,它移植自jchardet,chardet的java版实现,可实现对给定字符流的编码探测. N ...
- Ceph：一个开源的 Linux PB 级分布式文件系统
探索 Ceph 文件系统和生态系统 M. Tim Jones , 自由作家 简介: Linux®持续不断进军可扩展计算空间,特别是可扩展存储空间.Ceph 最近才加入到 Linux 中令人印象深刻的 ...
- 自定义JsonResult处理JSON序列化DateTime类型数据（Ext4.2+ASP.NET MVC 4）
最近项目中前台页面使用Extjs4.2 ,在后台ASP.NET MVC4返回的DateTime类型的数据错返回的DateTime类型的JsonResult的结果中的值是“\/Date(13784461 ...
- UltraChart画柱状图上面显示数值
http://www.cnblogs.com/kevin-h-wang/archive/2013/06/05/UltraChart.html 1.柱状图上显示数值 ? //第一种方法 this.Ult ...