给博客加入封面效果

/ 40评 / 1

enter image description here

嗯,大概的效果就是,当访客访问你的博客时,页面会首先显示一张全屏大图,然后再逐渐显示网页内容,很有趣,之前一个朋友让我给他做单页的时候,他想加入这个效果,我就研究了下,给他加了上去,后来在@碎碎念哪里看到的是JS版本,才想到我纯CSS做出来好像很厉害的样子,放出来仅供参考。

先贴出CSS代码,讲下方代码添加到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>

可以很直观的看出,代码是通过CSS3动画控制的效果,所以很轻量,但是兼容浏览器没有JS的全面。

html代码就更简单了,将下面代码放入body的最上面

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

代码参考:

<!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>

40条回应:“给博客加入封面效果”

  1. 晴和君说道:

    这个应该就不能根据加载进度来了吧。。。 :neutral:

  2. Oceano说道:

    加载这个后主题留言板失效~~怎么破?

  3. c说道:

    typecho用的不多,不过可以肯定只能用提取HTML代码这种方式获得首张图片。
    可以看看:http://bbs.emlog.net/thread-37506-1-1.html
    在TY的输出全文函数那使用应该就行。

  4. 纱窗说道:

    之前觉得学英语难,现在看到这个突然觉得英语好学多了,这个完全不懂呀!

  5. 搬瓦工说道:

    这个主题在TYPEHO中算是比较简洁的,非常适合个人日志。

  6. 两天说道:

    大神啊

  7. Mr.Dai说道:

    一个高中生的自留地 http://www.dzh.link/ 欢迎互访

  8. LittleGreyGrey说道:

    雁过留声,人过留名,我是小灰灰,欢迎互访。
    https://www.fifiblog.com

  9. Rich说道:

    再测试

  10. Rich说道:

    测试评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注