当前位置:首页 » 好文分享 » 详情

给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加载特效


打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
日期:2014年09月01日 00:01:16 星期日   分类:好文分享   浏览(93771)   评论(33)
本文地址:https://www.blogs.hk/post-338.html   [百度已收录]
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!

留言咨询

自动获取QQ

昵称

邮箱

网址

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.blogs.hk/)
李明 [回复该留言]
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
代码这东西真心看不懂。。。
14楼、纳众 [回复该留言]
2014-09-03 14:15
真心看不懂   好强大的数据库       支持   欢迎互访哈
13楼、冠名网 [回复该留言]
2014-09-03 09:43
支持一些博主,加特效样式那么多,而且JS也没封装在文件里面,会不会影响网站优化和打开速度啊。
李明 [回复该留言]
2014-09-03 10:35
@冠名网:影响不大的,你可试试效果如果。
冠名网 [回复该留言]
2014-09-03 13:57
@李明:额,有机会试试。
12楼、蓝天博客 [回复该留言]
2014-09-03 08:10
在别的博客也有看到,哈哈,挺喜欢这个的!

      Copyright © 2024 博客之家 版权所有  
      關於本站免責聲明sitemap新站登錄