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

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. C#数组删除元素

    一.C#数组删除元素 在C#中,只能在动态数组ArrayList类中对数组执行删除元素的操作.因为动态数组是一个可以改变数组长度和元素个数的数据类型. 示例: using System;using S ...

  2. 不安装oracle客户端如何使用plsql连接数据库

    不安装oracle客户端如何使用plsql连接数据库 1. 准备工作 1.1下载plsqldev破解版软件 我这里使用plsqldev715版本 1.2下载instantclient-basic-wi ...

  3. cocos2dx 3.x c++代码打包给lua调用过程（mac）

    下载cocos2dx 框架,在应用程序->cocos->framework->cocos2d-x-3.x->tools->tolua目录下,一个ini文件对应一个py文件 ...

  4. runtime实践之Method Swizzling

    利用 Objective-C 的 Runtime 特性,我们可以给语言做扩展,帮助解决项目开发中的一些设计和技术问题.这一篇,我们来探索一些利用 Objective-C Runtime 的黑色技巧.这 ...

  5. JavaScript递归实现对象深拷贝

    let personOne = { name:"张三", age:18, sex:"male", children:{ first:{ name:"z ...

  6. python导出开发环境

    1.导出开发环境的依赖包 本地开发完后,再把代码给别人之前,需要 pip freeze > pip123.txt 2.其他环境安装依赖包 pip install -r pip123.txt 其他 ...

  7. 【结构型模式】《大话设计模式》——读后感 （12）在NBA我需要翻译？——适配器模式

    适配器模式:将一个类的接口转换成客户希望的另外一个接口,Adapter模式使得原本由于接口不兼容而不能在一起工作的 那些类可以在一起工作了[DP] UML类图: 简单模拟一下代码: //已存在的.具有 ...

  8. django知识分支_1

    django知识分支 1.Cookie工作流程: 浏览器向服务器发出请求,服务器接收到浏览器的请求进行处理,服务器设置一个cookie发送给浏览器,浏览器将cookie保存,当需要再次登录的时候,浏览 ...

  9. 中移物联网onenet入门学习笔记1：资料获取

    onenet学习资料.视频.例程汇总:https://open.iot.10086.cn/bbs/thread-977-1-1.html onenet开发文档:https://open.iot.100 ...

  10. logging记录了其他操作的问题

    做atm作业的时候,记录转账操作的那个功能的文件里,同时也记录了增加账号和冻结账号的操作 2018-11-28 17:14:51,754 : transfer : INFO : 用户edward向用户 ...