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

随机推荐

Css控制div水平垂直居中显示
<style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...
Tomcat 默认应用
在部署应用时需要更改默认的端口号及应用,以免让别人知道使用的服务器类型而进行攻击.tomca的部署有多种方式,这里简单谈一下.目前想到有三种方式:一.添加 Context在Tomcat的配置文件中,一 ...
C语言数组作为函数参数
数组可以作为函数的参数使用,进行数据传送. 数组用作函数参数有两种形式,一种是把数组元素(下标变量)作为实参使用:另一种是把数组名作为函数的形参和实参使用. 数组元素作函数实参数组元素就是下标变量, ...
【干货】.NET开发通用组件发布（四）日志记录组件
组件介绍和合作开发 http://www.cnblogs.com/MrHuo/p/MrHuoControls.html 日志记录组件功能介绍通过基类Logger,实现了文本记录日志和数据库记录日志两 ...
java 编码转换
在网络中爬取到的数据,编码可能与当前编译器的编码不相同,而导致可能产生显示乱码的问题.那么如何将网络的编码,转换为当前编译器认可的编码(一般为UTF-8),就是个问题了. 主要使用了两个方法: Str ...
我和小美的撸码日记(1)之软件也需靠脸吃饭，带您做张明星脸（附后台经典框架 DEMO 下载）
众所周知程序员得靠技术吃饭,但是真的光靠技术就够了吗?Teacher苍,一位德艺双馨的艺术家,论技术她自然是炉火纯青,我觉得她桃李遍天下的原因不仅限于些,试想如果Teacher苍长得跟凤姐一样再带点乡 ...
NPAPI火狐插件VS2013开发示例
NPAPI火狐插件VS2013开发示例下面是我根据网上开发示例自己做的一个demo,并提供代码下载. 开发环境 Windows 8.1 x64 Visual studio 2013 准备工作首先需 ...
Effective Java2读书笔记-对于所有对象都通用的方法（三）
第12条:考虑实现Comparable接口这一条非常简单.就是说,如果类实现了Comparable接口,覆盖comparaTo方法. 就可以使用Arrays.sort(a)对数组a进行排序. 它与e ...
使用PULL方式解析XML资源文件下面的xml文件
public class MainActivity extends Activity { private Button btn = null; private List<Map<Strin ...
Qt Creator快捷键大全，附快捷键配置方法
一.快捷键配置方法: 进入“工具->选项->环境->键盘”即可配置快捷键. 二.常用默认快捷键: 编号快捷键功能 1 Esc 切换到代码编辑状态 2 F1 查看帮助( ...

javascript,css3加载动画

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

随机推荐

热门专题