给网站加个封面

最近好像很流行这种打开网页先来张大图片做封面的主题,效果大致是访客打开网站,首先跳出来一个全屏大图片,然后慢慢显示网站内容,要是再加上一段文字,看起来似乎就更加高大上有情怀些。

实现方法基本上分为JS和CSS3,作为使用WIN10的伙计,当然是选择CSS3了,虽然兼容性不怎么好,但谁还会在乎那些用WIN7以下的朋友呢?具体方法如下:
在head之间加上代码:

[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 10s;line-height:100vh;text-align:center;font-size:30px;color:#fff;}
@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之间加上代码,loading可以换成任何有情怀的句子,颜色什么的调整上面的CSS代码即可,如果不是摄影控,那也可以将图片来源换成Bing每日图片,那样就可以确保每天封面图片都不一样了。
[div class="loading"]Loading...[/div]