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加载动画,一种是声波形状的动画,另一 ...
随机推荐
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- C#图像处理（4）：图像的剪裁
图像的剪裁方法,从中间剪裁返回剪裁后的左右两页,方法实现如下: /// <summary> /// 图片裁剪,返回左右两页 /// </summary> /// <par ...
- poj3264 线段树
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 44121 Accepted: 20715 ...
- 【JAVA编码专题】深入分析 Java 中的中文编码问题
http://www.ibm.com/developerworks/cn/java/j-lo-chinesecoding/ 几种常见的编码格式 为什么要编码 不知道大家有没有想过一个问题,那就是为什么 ...
- php环境安装及搭建
最近由于项目需要 转战 PHP . 在做了差不多两年java后 说实话看php代码还是有些难受的. 毕竟不习惯.废话不说 先说一下 PHP环境的部署等等,也就是最近几天学习的心得吧.方便以后参考. ...
- 一键分享到新浪微博、腾讯微博、搜狐微博、人人网、开心网、百度收藏等js代码大全
下面给大家一些分享的js代码,只要把代码插入自己的网页中稍微修改一下图片路径就可以用了,好了,废话少说,上代码: document.writeln("<b>喜欢本文,那就分享到 ...
- Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化（三）
4.一些实例 如果我们想要获得所有家乡是湖北的人,最无脑的做法是先获得湖北省,再获得湖北的所有城市,最后获得故乡是这个城市的人.就像这样: 1 2 3 4 5 >>> hb = Pr ...
- qt info.plist 添加
http://www.waitingfy.com/archives/1242 http://www.sollyu.com/settings-icon-under-the-qt-mac-applicat ...
- 浅谈程序员创业（要有一个自己的网站，最好的方式还是自己定位一个产品，用心把这个产品做好。或者满足不同需求的用户，要有特色）good
浅谈程序员创业 ——作者:邓学彬.Jiesoft 1.什么是创业? 关于“创业”二字有必要重新学习一下,找了两个相对权威定义: 创业就是创业者对自己拥有的资源或通过努力能够拥有的资源进行优化整合,从而 ...
- 《Programming WPF》翻译 第9章 5.默认可视化
原文:<Programming WPF>翻译 第9章 5.默认可视化 虽然为控件提供一个自定义外观的能力是有用的,开发者应该能够使用一个控件而不用必须提供自定义可视化.这个控件应该正好工作 ...