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

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. 为什么要在函数内部声明 var that = this 呢

    看一个例子 $('#conten').click(function(){ //this是被点击的#conten var that =this; $('.conten').each(function() ...

  2. 转 Anaconda启动卡死的解决方案

    https://blog.csdn.net/meng_zhi_xiang/article/details/83651676

  3. mysql关联查询

    mysql数据库的统计------生成统计信息 1.distinct:在一组之中将各个唯一的值找出来,如找出所有的品牌种类 mysql>select distinct brand_kind fr ...

  4. 【线程池】ExecutorService与quartz搭配出现的问题

    问题描述: 使用quartz定时推送微信公众号模板消息,一分钟推送一次,定时器里面使用了一个ExecutorService线程池,大小为5个. 批量获取数据之后,全部数据都被分配到n/5的线程池里面等 ...

  5. ccf 201712-3 Crontab(Python实现)

    一.原题 问题描述 试题编号: 201712-3 试题名称: Crontab 时间限制: 10.0s 内存限制: 256.0MB 问题描述: 样例输入 3 201711170032 201711222 ...

  6. Python基础（五）——闭包与lambda的结合

    (1)变量的域 要了解闭包需要先了解变量的域,也就是变量在哪一段“上下文”是有效的(类似局部变量和全局变量的区别),举一个很简单的例子.(例子不重要,就是涉及闭包就要时刻关注这个域) def test ...

  7. List删除元素

    在单线程环境下的解决办法 public void remove() { if (lastRet == -1) throw new IllegalStateException(); checkForCo ...

  8. LeetCode（166） Fraction to Recurring Decimal

    题目 Given two integers representing the numerator and denominator of a fraction, return the fraction ...

  9. 安装liteIDE on mac

    download and install: http://sourceforge.net/projects/liteide/files/ 解决不能编译,没有自动完成的问题: http://stacko ...

  10. CSS 工程化 小结

    CSS 工程化 组成:1.组织 (代码目录)2.优化(那种实现方式更好) 3.构建(代码完成后需要经过哪些处理步骤) 4.维护 常见问题 1.如何解决 CSS 模块化问题 1.Less Sass 等C ...