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

随机推荐

iocfont 网页图标字体以及使用方法
在网页设计中使用图标字体(icon font)是件挺有新意的事情,使用图标字体能我们带来了一定的方便,比如在移动设备.Retina屏幕效果展示.兼容IE6/7浏览器以及能任意将图标放大缩小等,这些都是 ...
Oracle关联查询关于left/right join的那点事
/*题外话 --更改foreign key约束定义引用行(delete cascade/delete set null/delete no action),默认delete on action--引用 ...
JAVA与JSON的序列化、反序列化
package com.linkage.app.memcache; import java.util.HashMap;import java.util.Map.Entry; import net.sf ...
将 varchar 值转换为 JDBC 数据类型 DATE 时发生错误。
问题是: 我是这样解决的 : 网上的转型方法并不好使 ,我想了想可能是由于返回值是String 我就成功的解决错误了 ..下面是关于原理的讲解肯定方法不唯一至于错误,的产生,这个肯 ...
修饰器模式（day04）
修饰器设计模式 --最近我给女朋友买了一款可以更换外壳的手机.现在的外壳是红色的,假如我想用这款手机的时候,会更换成银灰色的外壳.但是我不能随意更换天线或者话筒,因为这些功能模块在手机生产的时候就已经 ...
hdu 1263 水果
Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~ Joe经营着一个不大的水果店.他认为生存之道就是经营最受顾客欢迎的水果.现在他想要一份水果销售情况的明细表,这样J ...
vector的用法总结
Reference Constructors vector Constructs a vector of a specific size or with elements of a specific ...
使用python发邮件
使用python发邮件网上有很多发邮件的例子,本人在网上找了一份,稍加修改后使用上源码 # encoding=utf-8 from email.mime.image import MIMEImag ...
【0】Laravel 5.1 简介
1.简介 Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以 ...
validatebox验证框架rules
项目前端使用JQuery easyui框架,验证使用插件validatebox,验证方法如下: <input name="test" type="text" ...

javascript,css3加载动画

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

随机推荐

热门专题