当前位置:首页 » 网站建设 » 正文

分类页和文章页“当前位置”下方广告(PC版)
分类页和文章页“当前位置”下方广告(移动版)

给网页添加QZone开场动画效果

646 人参与  2016年09月27日 19:51  分类 : 网站建设  评论

以前玩QQ空间的时候,经常更换开场动画。前两天一哥们,想在自己的网站上添加开场动画,所以找到了我。说实话,我也没弄过这种效果,而且凭我为数不多的经验,如果做的和QQ空间一样是非常困难的。原因就是我不会flash,呵呵。

所以简单做了一个效果,开场显示图片。然后立刻隐藏,显示网站内容。间接相当于开场动画了吧。

首先在header内添加以下代码(不要放入css文件内)

<style>
.loading{opacity:0;background:#fff url(images/loading.jpg);
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:Loading 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;}
@keyframes Loading
{
0% {opacity:1;color:#C1FF50;z-index:999999;}
20% {opacity:1;color:#5CB8FF;}
40% {opacity:1;color:#FFD350;}
60% {opacity:1;color:#FF5950;}
80% {opacity:.5;color:#fff;}
100% {opacity:0;}
}
</style>

然后再body最上面添加

<div class="loading">Loading...</div>

ok,可以把以下代码,复制到html中查看效果。代码中的图片自定义就好了。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style>
.loading{opacity:0;background:#fff url(images/loading.jpg);
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:Loading 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;}
@keyframes Loading
{
0% {opacity:1;color:#C1FF50;z-index:999999;}
20% {opacity:1;color:#5CB8FF;}
40% {opacity:1;color:#FFD350;}
60% {opacity:1;color:#FF5950;}
80% {opacity:.5;color:#fff;}
100% {opacity:0;}
}
</style>
</head>
<body>
<div class="loading">Loading...</div>
</body>
</html>


来源:新哈网(微信/QQ号:897698882),转载请保留出处和链接!

本文链接:http://www.xinha.net/post/357.html

文章底部广告(PC版)
文章底部广告(移动版)
百度分享获取地址:http://share.baidu.com/

本文标签:动画  效果  特效  

百度推荐获取地址:http://tuijian.baidu.com/,百度推荐可能会有一些未知的问题,使用中有任何问题请直接联系百度官方客服!
<< 上一篇 下一篇 >>
评论框上方广告(PC版)
评论框上方广告(移动版)

  • 评论(0)
  • 相关文章

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

我是标题

    内容的形式各种各样,可以是文本,也可以是各种广告等。

网络推广 | 网络营销 | 本站主题 | 网络创业 | 电子商务