给博客加入封面效果

/ 40评 / 3

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>
  1. 醉风云说道:

    你之前从WP迁移过来的时候,固定连接,文章链接有没有变?可以和WP保持一致么?

  2. c说道:

    唔个人感觉N8很好看,可能是审美不同……

  3. 谭话网校说道:

    确实很棒!!!

  4. 谢谢博主 这个效果不错,也许会用到

  5. 昌浩说道:

    我就想知道,为何换回去以前的主题了?

  6. Rich说道:

    之前在一个国外Bootstrap主题中看过这个效果,不过其实现的方法是用JS。
    为什么又换成了NewRealm6了?

  7. 邦尼说道:

    貌似在贵博客木有看到预览…我下载试试。谢谢

  8. 碎碎念ZWS说道:

    好吧,你的这个比我的那个华丽丽一些,而且我那个在网页正文加载完毕前,图片过大的话效果就很渣,看来,CSS实现的要更爽一些

  9. Page说道:

    为毛没有演示+_+

  10. Xider说道:

    沙发

发表评论

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