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

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>test</title>
  6. 	<link rel="stylesheet" href="test.css" type="text/css" />
  7. </head>
  8. <body>
  9. 	<div class="loading">
  10. 		<div class="load">
  11. 			<div class="layer"></div>
  12. 			<div class="layer2"></div>
  13. 			<div class="text">25%</div>
  14. 		</div>
  15. 		<div class="loadshadow"></div>
  16. 	</div>
  17. </body>
  18. </html>

css3

  1. body {position: relative;}
  2. @keyframes shadow
  3. {
  4. 	0%
  5. 	{
  6. 		-webkit-transform: scale(0.8); opacity: 0.5;
  7. 		   -moz-transform: scale(0.8); opacity: 0.5;
  8. 		    -ms-transform: scale(0.8); opacity: 0.5;
  9. 		     -o-transform: scale(0.8); opacity: 0.5;
  10. 		        transform: scale(0.8); opacity: 0.5;
  11. 	}
  12. 	100%
  13. 	{
  14. 		-webkit-transform: scale(1); opacity: 1;
  15. 		   -moz-transform: scale(1); opacity: 1;
  16. 		    -ms-transform: scale(1); opacity: 1;
  17. 		     -o-transform: scale(1); opacity: 1;
  18. 		        transform: scale(1); opacity: 1;
  19. 	}
  20. }
  21. @keyframes move1
  22. {
  23. 	0%
  24. 	{
  25. 		-webkit-transform: translateY(7px);
  26. 		   -moz-transform: translateY(7px);
  27. 		    -ms-transform: translateY(7px);
  28. 		     -o-transform: translateY(7px);
  29. 		        transform: translateY(7px);
  30. 	}
  31. 	100%
  32. 	{
  33. 		-webkit-transform: translateY(0px);
  34. 		   -moz-transform: translateY(0px);
  35. 		    -ms-transform: translateY(0px);
  36. 		     -o-transform: translateY(0px);
  37. 		        transform: translateY(0px);
  38. 	}
  39. }
  40. @keyframes move2
  41. {
  42. 	0%
  43. 	{
  44. 		transform:rotate(0deg);
  45. 	}
  46. 	100%
  47. 	{
  48. 		transform: rotate(-360deg);
  49. 	}
  50. }
  51. @keyframes move3
  52. {
  53. 	0%
  54. 	{
  55. 		transform: rotate(0deg);
  56. 	}
  57. 	100%
  58. 	{
  59. 		transform: rotate(360deg);
  60. 	}
  61. }
  62.  
  63. .loading { width: 120px; height: 140px; position: fixed; left:calc(50% - 60px); top:calc(50% - 70px);}
  64. .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;}
  65. .layer {width:120px; height:100px; background: url(./image/loading4.png) no-repeat; position: absolute; top: 0px; left: 0px; animation: 1.2s move2 infinite linear;}
  66. .layer2 {width: 120px; height: 100px; background: url(./image/loading5.png) no-repeat; position: absolute; top:0px; left: 0px; animation:1.2s move3 infinite linear;}
  67. .text { width: 120px; height: 100px; position: absolute; top: 0px; left: 0px; text-align: center; line-height: 100px; font:bold 16px/100px bold; color:#f9725c;}
  68. .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. Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...

  2. CPL学习笔记（二）

    数组 数组(array) 声明通用格式为: typeName arrayName[arraySize]. arrayName指定元素数目,必须为整型常量或const值.(不能是变量) int a[3] ...

  3. python列表之append与extend方法比较

    append和extend是列表的两种添加元素方式,但这两种方式却又有些不同之处.那么不同之处在哪里呢,我们通过对二者的定义和实例来看一看. list.append() 1.定义:L.append(o ...

  4. 通过代码链接ftp上传下载删除文件

    因为我的项目是Maven项目,首先要导入一个Maven库里的包:pom.xml <dependency>            <groupId>com.jcraft</ ...

  5. shutil，zipfile，tarfile模块

    一,shutil模块 1.shutil.chown() shutil.chown('test.txt',user='mysql',group='mysql') #改变文件的属主和属组. 2.shuti ...

  6. The 2018 ACM-ICPC China JiangSu Provincial Programming Contest J. Set

    Let's consider some math problems. JSZKC has a set A=A={1,2,...,N}. He defines a subset of A as 'Meo ...

  7. Docker初认识（一）

    1)简介 1.1)什么是Docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,它是基于 dotCloud 公司多年云服务技术的 ...

  8. BZOJ 4355: Play with sequence

    调了好久,还是黑盒测试有前途 我以前怕不是学了假的吉利线段树(我第一次知道还要记次小值去更新的........) #include<cstdio> #include<algorith ...

  9. LA 7048 Coprime 莫比乌斯反演

    题意: 给出\(n(n \leq 10^5)\)个数字\(a_i(a_i \leq 10^5)\),从中选出\(3\)个数,使得这\(3\)个数两两互质或者两两不互质 分析: 可以说这是<训练指 ...

  10. python基础学习笔记——单继承

    1.为什么要有类的继承性?(继承性的好处)继承性的好处:①减少了代码的冗余,提供了代码的复用性②提高了程序的扩展性 ③(类与类之间产生了联系)为多态的使用提供了前提2.类继承性的格式:单继承和多继承# ...