给emlog博客加上封面杂志效果
大概的效果就是，当访客访问你的博客时，页面会首先显示一张全屏大图，然后再逐渐显示网页内容，很有趣，之前一个朋友让我给他做单页的时候，他想加入这个效果，我就研究了下，给他加了上去，后来在@碎碎念哪里看到的是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>
OK，我就不上演示了，本地测试一下效果吧。
代码参考：
<!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>
发表评论