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

随机推荐

Activity-在ListFragment中为ListView增加空白视图
有两种方法可以实现为ListView添加空白视图.但是原理都一样: 第一种方法是XML+代码添加: 1.定义emptyView视图 2.调用AdapterView的setEmptyView(empt ...
listener笔记
listener 分四步: 在被观察者类中创建 onXXListener Interface,包含一个方法:xxxListener(object o),参数根据需要观察者需要设定. public in ...
学习MVC框架之一
一.MVC的概述 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑和数据显示分离的 ...
QML添加右键菜单
MouseArea { id: mouseRegion anchors.fill: parent; acceptedButtons: Qt.LeftButton | Qt.RightButton // ...
sql 用openxml 将xml转换为数据表Table
CREATE PROCEDURE up_OpenXml ( @xml XML ) AS BEGIN DECLARE @Pointer INT EXECUTE sp_xml_preparedocumen ...
启动安卓模拟器报错 emulator: ERROR: x86_64 emulation currently requires hardware acceleration! CPU acceleration status:HAXM must be updated(version 1.1.1<6.0.1) 解决办法
启动安卓模拟器报错 emulator: ERROR: x86_64 emulation currently requires hardware acceleration! CPU accelerat ...
Idea使用记录--每次修改JS文件都需要重启Idea才能生效解决方法
最近开始使用Idea,有些地方的确比eclipse方便.但是我发现工程每次修改JS或者是JSP页面后,并没有生效,每次修改都需要重启一次Tomcat这样的确不方便.我想Idea肯定有设置的方法,不可能 ...
mongodb 基本语法
成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show collections:显示 ...
SVN - 详细文档
1.首先打开Cornerstone 2.然后如下图所示: 3.选择对应的仓库,如下图所示 4.然后Import完成之后,就把本地的文件提交到SVN服务器上了,如下图所示,另外如果你想要使用SVN进行版 ...
在Fedora 20下编译安装QEMU
由于OpenStack的流行,现在越来越多的人关注QEMU,最近发行了新版本1.7,下面就说Fedora下的安装过程: 首先需要安装基本的编译软件和git sudo yum install gcc m ...

javascript,css3加载动画

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

随机推荐

热门专题