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

随机推荐

OWIN初探（转）
什么是 OWIN ? OWIN 的全称是 "Open Web Interface for .NET", OWIN 在 .NET Web 服务器和 .NET Web 应用之间定义了一 ...
oracle数据库事务相关【weber出品必属精品】
事务的概念:事务:一个事务由一组构成一个逻辑操作的DML语句组成事务有开始有结束,事务以DML语句开始,以Conmmit和Rollback结束.以下情况会使得事务结束: 1. 执行COMMIT 或者 ...
关于(x&y)+((x^y)>>1)的探究
今天在程序员面试宝典上看到 int f(int x int y ) { return (x&y)+((x^y)>>1) } f(729,271) 结果为500 从式子中可以看出分为 ...
火狐下<a>标签里嵌套的<select>不能选的bug
今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...
HTML中select标签单选多选详解
select 元素可创建单选或多选菜单.当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包 ...
小SQL大作用
从DBA那问来的,备份现有数据库表: create table B select * from A ; 删除,重建数据库主键 alter table book_order drop primary k ...
2014年总结：我的IT路
又是一年春节时,转眼之间已经毕业4年,简单回顾一下这几年的职业生涯,希望大家提出宝贵意见. 大学时,几个同学跟着学校网络中心的老师一块做校园网上运行的小系统.偶尔协助一下老师对学校机房.校园网做一下维 ...
PowerShell常用的属性
get-location | get-member -membertype property -------获取对象的属性---------- 获取对象特定的成员, 湖区.Net Framwork ...
UltraChart画柱状图上面显示数值
http://www.cnblogs.com/kevin-h-wang/archive/2013/06/05/UltraChart.html 1.柱状图上显示数值 ? //第一种方法 this.Ult ...
ElasticSearch大批量数据入库
最近着手处理大批量数据的任务. 现状是这样的,一个数据采集程序承载大批量数据的存储和检索.后期可能需要对大批量数据进行统计. 数据分布情况 13个点定时生成采集结果到4个文件(小文件生成周期是5分钟) ...

javascript,css3加载动画

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

随机推荐

热门专题