给博客加入封面效果
嗯，大概的效果就是，当访客访问你的博客时，页面会首先显示一张全屏大图，然后再逐渐显示网页内容，很有趣，之前一个朋友让我给他做单页的时候，他想加入这个效果，我就研究了下，给他加了上去，后来在@碎碎念哪里看到的是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>
沙发
好久不见
好久不见，隔了这么久还在坚持做博客不容易啊
为毛没有演示+_+
有提供代码啊- -，我感觉我博客不需要加这个
好吧，你的这个比我的那个华丽丽一些，而且我那个在网页正文加载完毕前，图片过大的话效果就很渣，看来，CSS实现的要更爽一些
但是IE的话就坑了
IE直接忽略，我现在几乎不考虑IE兼容性
貌似在贵博客木有看到预览...我下载试试。谢谢
之前在一个国外Bootstrap主题中看过这个效果，不过其实现的方法是用JS。
为什么又换成了NewRealm6了？
突然觉得N7、N8不好看，抽时间做主题
我就想知道，为何换回去以前的主题了？
突然觉得N7、N8不好看
谢谢博主 这个效果不错，也许会用到
确实很棒！！！
唔个人感觉N8很好看，可能是审美不同……
可能因为我视觉疲劳了。。。
在NewRealm系列中，我比较喜欢的是NR1,NR2,NR5,NR7
用了你的新的typecho-ajax-comm.js，来试试效果
不行，效果还是那样。。。
你之前从WP迁移过来的时候，固定连接，文章链接有没有变？可以和WP保持一致么？
全都是一致的，没有变，只需要在TP后台修改成WP用的固定链接格式就行了，你可以本地试一试，保险一些
谢谢
测试评论
再测试
雁过留声，人过留名，我是小灰灰，欢迎互访。
https://www.fifiblog.com
LittleGreyGrey ￢_￢ 额
一个高中生的自留地 http://www.dzh.link/ 欢迎互访
大神啊
这个主题在TYPEHO中算是比较简洁的，非常适合个人日志。
之前觉得学英语难，现在看到这个突然觉得英语好学多了，这个完全不懂呀！
typecho用的不多，不过可以肯定只能用提取HTML代码这种方式获得首张图片。
可以看看：http://bbs.emlog.net/thread-37506-1-1.html
在TY的输出全文函数那使用应该就行。
这个用富文本编辑器还可以，但是我用的是MarkDown编辑器
加载这个后主题留言板失效~~怎么破?
失效？看你那边并么有失效啊
PC端失效了，手机端并没有~~
失效是指不显示评论还是？
无法点击~评论栏和下一页
这个应该就不能根据加载进度来了吧。。。 :neutral:
CSS3那点小计俩，这个也就只是装个小B用的。。。