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

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. 类库日期和jsp导包

    一.日期类库 1.1. Date Date类创建一个时间,或者是创建一个与你计算机当前的时间:精确到毫秒. //实例化时间类 Date date = new Date(); 1.2.格式转换类 1.2 ...

  2. redis的一个bug

    清楚redis缓存的时候,出现以下问题: (error) MISCONF Redis is configured to save RDB snapshots, but is currently not ...

  3. 【线性基合并 树链剖分】bzoj4568: [Scoi2016]幸运数字

    板子题 Description A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个 幸运数字,以纪念碑的形式矗立在这座城市的正中心,作为城市 ...

  4. PHP安装Xcache扩展

    简述 XCache 是一个又快又稳定的 ​PHP opcode 缓存器. 经过良好的测试并在大流量/高负载的生产机器上稳定运行. 经过(在 linux 上)测试并支持所有现行 ​PHP 分支的最新发布 ...

  5. ProC第三弹

    一.前言 我们上面已经了解Windows和Linux下的ProC开发环境,这里我们更进一步去简要介绍下ProC的预编译参数. 二.什么是预编译 预编译过程中,Pro*C/C++会自动生成C或者C++的 ...

  6. ASP.NET Web网站中App_Code文件夹的作用及使用场景

    原文地址:Web Site项目和ASP.NET Web Application中App_Code文件夹的作用作者:宾的宾 我现在要建一个ASP.NET的网站了,不难吧,开始动手.如下图: 这种方法建立 ...

  7. POJ：1328-Radar Installation

    Radar Installation Time Limit: 1000MS Memory Limit: 10000K Description Assume the coasting is an inf ...

  8. Git命令大总结（纯手办）

    Git完整命令手册地址:http://git-scm.com/docs PDF版命令手册地址:github-git-cheat-sheet.pdf 1.git config -l查看全局用户信息配置 ...

  9. MySQL-状态Waiting on empty queue引申

    MySQL 事件调度器示例演示 我们大家都知道MySQL 事件调度器是在 MySQL 5.1 中新生的一个较为特殊的功能,其可以作为定时任务调度器,来取代部分原先只能用操作系统任务调度器才能完成的定时 ...

  10. adb提取安装的apk

    第一步:列出所有安装的apk adb shell pm list packages  然后找到自己要取出来的apk的包名. 第二布:找到apk的位置(后面跟上包名) adb shell pm path ...