给emlog添加页面加载特效

首先声明这特效代码是我在王小刀博客看到的,我觉得蛮可爱就把代码分享给大家吧!

1.首先在</body>之前加上如下代码:
<div id="circle"></div>
	<div id="circletext"></div>
<div id="circle1"></div>

2.再加上一段JS
<script type="text/javascript">
$(function () {
$("#circletext").text("加载肿");
	$(window).load(function() {
		$("#circle").fadeOut(400);
		$("#circle1").fadeOut(600);
		$("#circletext").text("完成鸟").fadeOut(800);
	});
});
//-->
</script>

3.加上css

	/* 圆圈加载*/
#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(10,10,10,0.9);opacity:.9;border-right:5px solid rgba

(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #808080;width:60px;height:60px;margin:0 

auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite 

linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}
#circle1{background-color:rgba(0,0,0,0);border:6px solid rgba(20,20,20,0.9);opacity:.9;border-left:6px solid rgba

(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #202020;width:40px;height:40px;margin:0 

auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s 

infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}
#circletext{width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate

(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-

transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate

(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}
@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate

(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}
@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}

就是这么简单的,效果:


Emlog加载特效 Emlog加载特效



版权所有:《博客之家
文章标题:《给emlog添加页面加载特效
除非注明,文章均为 《博客之家》 原创
转载请注明本文短网址:https://bk.likinming.com/post-338.html  [生成短网址]

日期:2014年09月01日 星期一   分类:好文分享   浏览(24394)   评论(33)
百度暂未收录本文
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。免费发布信息

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

自动获取QQ

昵称

邮箱

网址

24楼、水水水水 [回复该留言]
2015-08-24 12:11
博主啊,请问是在哪个文件改啊????!!!
23楼、慕浟佳 [回复该留言]
2014-11-15 20:31
能体会图片就好了!
22楼、 [回复该留言]
2014-09-06 17:21
总是觉得有点得不偿失
21楼、牛人牛事 [回复该留言]
2014-09-05 22:11
全看不懂,不过也来过了一趟,欢迎互访
20楼、pptv官方下载 [回复该留言]
2014-09-05 09:26
有机会试试1 应该不错吧
19楼、王小刀 [回复该留言]
2014-09-04 18:32
首先声明,这特效是我从www.shuyong.net
李明 [回复该留言]
2014-09-04 21:59
@王小刀:谢谢你扒来的代码。
王小刀 [回复该留言]
2014-09-04 22:02
@李明:又换板了
李明 [回复该留言]
2014-09-04 22:16
@王小刀:是的,之前的模板加载太慢了,现在的模板简洁、加载快。
18楼、奇葩 [回复该留言]
2014-09-04 17:41
学习了 以后可以搞搞特效
17楼、免费部落 [回复该留言]
2014-09-04 10:20
这个应该换到wordpress上也可用的!
16楼、教程大全论坛 [回复该留言]
2014-09-04 08:58
成功的秘诀,在永不改变既定的目的。 ——   悟空网赚来访,欢迎互访
15楼、南京艺考培训 [回复该留言]
2014-09-03 15:39
代码这东西真心看不懂。。。

网站收录提交

  • 名称:
  • 网址:

网址统计

  • 收录网址:926 个
  • 发布文章:2512 条
  • 本站运行:5年6月3天
Copyright © 2012 - 2018 by 李明关于本站免责声明本站下载站点地图sitemap广告联系