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加载动画,一种是声波形状的动画,另一 ...

随机推荐

操作Action
Action就是Controller的一个方法包含对应请求的最终结果 Action里代码从Model层拿到数据最后把数据结果Actionresult 返回用户
【Solr初探】Solr安装，启动，查询，索引
1. 安装&启动官网:http://lucene.apache.org/solr/ 下载源代码,解压,进入根目录(我把solr放在/usr/local/solr下) 在/usr/local/ ...
简单描述一下XIB与Storyboards,简述它们的优缺点。
参考答案: 我倾向于纯代码开发,因此所提供的参考答案可能具有一定的个人感情,不过还是给大家说说自己的想法. 优点: XIB:在编译前就提供了可视化界面,可以直接拖控件,也可以直接给控件添加约束,更直观 ...
hdu 1215 七夕节
Problem Description 七夕节那天,月老来到数字王国,他在城门上贴了一张告示,并且和数字王国的人们说:"你们想知道你们的另一半是谁吗?那就按照告示上的方法去找吧!" ...
Introduction to the POM
原文:https://maven.apache.org/guides/introduction/introduction-to-the-pom.html Introduction to the POM ...
sqlalchemy操作Mysql
SQLAlchemy“采用简单的Python语言,为高效和高性能的数据库访问设计,实现了完整的企业级持久模型”.SQLAlchemy的理念是,SQL数据库的量级和性能重要于对象集合:而对象集合的抽象又 ...
自定义textView的高度
原文地址: http://www.cocoachina.com/ios/20141226/10778.html iOS 8 之后的新特性
C++之------进制学习
碰到一些寄出的东西不是很理解,就是关于多进制在代码中的转换: 比喻一个数number的多进制表示方法:B:二进制 Q:八进制 D:十进制 H:十六进制二进制:0bnumber ( ...
android添加edittext后布局就不好用
在布局添加控件手动添加还是拖的添加,添加edittext后布局就不好用,其他控件好用,然后就说下面这段话 Exception raised during rendering: java.lang.Sy ...
【转】图文并茂 Ubuntu使用Thunderbird方法指南
原文网址:http://os.51cto.com/art/201101/243445.htm Ubuntu 是一个启动速度超快.界面友好.安全性好的操作系统,它适用于桌面电脑.笔记本电脑.服务器以及上 ...

javascript,css3加载动画

javascript,css3加载动画的更多相关文章

随机推荐

热门专题