参考秒味课堂 代码发出来备忘

html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>test</title>

	<link rel="stylesheet" href="test.css" type="text/css" />

</head>

<body>

	<div class="loading">

		<div class="load">

			<div class="layer"></div>

			<div class="layer2"></div>

			<div class="text">25%</div>

		</div>

		<div class="loadshadow"></div>

	</div>

</body>

</html>

css3

body {position: relative;}

@keyframes shadow

{

	0%

	{

		-webkit-transform: scale(0.8); opacity: 0.5;

		   -moz-transform: scale(0.8); opacity: 0.5;

		    -ms-transform: scale(0.8); opacity: 0.5;

		     -o-transform: scale(0.8); opacity: 0.5;

		        transform: scale(0.8); opacity: 0.5;

	}

	100%

	{

		-webkit-transform: scale(1); opacity: 1;

		   -moz-transform: scale(1); opacity: 1;

		    -ms-transform: scale(1); opacity: 1;

		     -o-transform: scale(1); opacity: 1;

		        transform: scale(1); opacity: 1;

	}

}

@keyframes move1

{

	0%

	{

		-webkit-transform: translateY(7px);

		   -moz-transform: translateY(7px);

		    -ms-transform: translateY(7px);

		     -o-transform: translateY(7px);

		        transform: translateY(7px);

	}

	100%

	{

		-webkit-transform: translateY(0px);

		   -moz-transform: translateY(0px);

		    -ms-transform: translateY(0px);

		     -o-transform: translateY(0px);

		        transform: translateY(0px);

	}

}

@keyframes move2

{

	0%

	{

		transform:rotate(0deg);

	}

	100%

	{

		transform: rotate(-360deg);

	}

}

@keyframes move3

{

	0%

	{

		transform: rotate(0deg);

	}

	100%

	{

		transform: rotate(360deg);

	}

}

.loading { width: 120px; height: 140px; position: fixed; left:calc(50% - 60px); top:calc(50% - 70px);}

.load {width: 120px; height: 100px; background: url(./image/loading3.png); position: absolute;left: 0px; top: 0px; -webkit-animation: .5s move1 infinite alternate linear; animation: .5s move1 infinite alternate linear;}

.layer {width:120px; height:100px; background: url(./image/loading4.png) no-repeat; position: absolute; top: 0px; left: 0px; animation: 1.2s move2 infinite linear;}

.layer2 {width: 120px; height: 100px; background: url(./image/loading5.png) no-repeat; position: absolute; top:0px; left: 0px; animation:1.2s move3 infinite linear;}

.text { width: 120px; height: 100px; position: absolute; top: 0px; left: 0px; text-align: center; line-height: 100px; font:bold 16px/100px bold; color:#f9725c;}

.loadshadow{ width: 100px; height: 20px; margin:0 auto; background:-webkit-radial-gradient(contain,rgba(0,0,0,0.7),rgba(0,0,0,0)); position: absolute; left:10px; bottom:0px;-webkit-animation: .5s shadow infinite alternate linear;}

应用css3制作loading效果的更多相关文章

  1. CSS3自定义loading效果

    效果: 使用CSS3完成loading的制作 css样式: <style type="text/css"> .mask { position: fixed; left: ...

  2. 使用CSS3制作立体效果的导航菜单

    效果如下: 也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm 请使用支持CSS3的浏览器访问本页面,获得更好效果. 源代码: <st ...

  3. CSS3实现Loading效果

    使用Loding的gif图,每一帧图片的外层会有白色描边.所以如果必须使用gif图的话,请将背景色设置为白色. 你也尝试用以下方法,使用css来实现loading的效果 1. 适用于pc端.在移动端上 ...

  4. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  5. css3 实现loading效果

    1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> .demo1{ width: 40px; hei ...

  6. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  7. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  8. animation & @keyframes 实现loading效果

    效果图截图如下: 直接上代码: html <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  9. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

随机推荐

  1. nginx下配置laravel+rewrite重写

    server { listen ; server_name ha.d51v.cn; #access_log /data/wwwlogs/access_nginx.log combined; root ...

  2. python入门：if、elif、else 条件语句的基本用法

    #!/usr/bin/env python # -*- coding:utf-8 -*- #elif(否则如果,译音:埃尔夫)eise(否则,译音:埃尔斯) #if.elif.else 条件语句的基本 ...

  3. phpExcel使用方法一

    include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/Writer/Excel5 ...

  4. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  5. LeetCode（226）Invert Binary Tree

    题目 分析 交换二叉树的左右子树. 递归非递归两种方法实现. AC代码 class Solution { public: //递归实现 TreeNode* invertTree(TreeNode* r ...

  6. LeetCode（287）Find the Duplicate Number

    题目 Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), ...

  7. The Best Path HDU - 5883 欧拉通路

    图(无向图或有向图)中恰好通过所有边一次且经过所有顶点的的通路成为欧拉通路,图中恰好通过所有边一次且经过所有顶点的回路称为欧拉回路,具有欧拉回路的图称为欧拉图,具有欧拉通路而无欧拉回路的图称为半欧拉图 ...

  8. private virtual in c++

    source from http://blog.csdn.net/steedhorse/article/details/333664 // Test.cpp #include <iostream ...

  9. BZOJ 4368: [IOI2015]boxes纪念品盒

    三种路径,左边出去左边回来,右边出去右边回来,绕一圈 绕一圈的路径最多出现一次 那么绕一圈的路径覆盖的点一定是左边半圈的右边和右边半圈的左边 枚举绕一圈的路径的起始点(一定要枚举,这一步不能贪心),更 ...

  10. Django中间件、Auth认证

    中间件 一:什么是中间件 是介于request与response处理之间的一道处理过程 二:中间件的作用 如果你想修改请求,例如被传送到view中的HttpRequest对象. 或者你想修改view返 ...