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

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. Bootstrap历练实例：面板的标题

    面板标题 我们可以通过以下两种方式来添加面板标题: 使用 .panel-heading class 可以很简单地向面板添加标题容器.to easily add a heading container ...

  2. OC和C++的混用1

    //Objective-C类 /*在混用之前需要做一步非常重要的事:不是代码而是编译器选项,在做混合编译之前一定要把编译器的Compile Sources As选项改为Objective C++. 修 ...

  3. 【php】【特殊案例】数组调用方法

    As of PHP 5.4.0, you can call any callable stored in a variable. <?php class Foo { static functio ...

  4. php生成zip压缩文件的方法，支持文件和压缩包路径查找

    /* * new creatZip($_dir,$_zipName); *@ _dir是被压缩的文件夹名称,可使用路径,例 'a'或者'a/test.txt'或者'test.txt' *@ _zipN ...

  5. 3.layhm框架的流程与Boot类启动

    思路 在项目根目录里新建好对应的目录 cmd里在项目根目录里,composer init初使化,一路回车 把要自动加载的文件和目录定在composer.json文件的autoload里,file是自动 ...

  6. python3 简单服务器监控，自动发送邮件

    import smtplibfrom email.mime.text import MIMETextfrom email.mime.multipart import MIMEMultipartimpo ...

  7. （转）git常见错误

      error: src refspec master does not match any. 引起该错误的原因是,目录中没有文件,空目录是不能提交上去的 error: insufficient pe ...

  8. LeetCode（226）Invert Binary Tree

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

  9. phpmyadmin提示The mbstring extension is missing的解决方法

    解决办法:安装php-mbstring yum install php-mbstring

  10. HDU - 1251 统计难题（Trie树）

    有很多单词(只有小写字母组成,不会有重复的单词出现) 要统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). 每个单词长度不会超过10. Trie树的模板题.这个题内存把控不好容易MLE. ...