CSS3实现超酷的黑猫警长首页

先看看效果图：

具体代码：

1.   
2.   
3.   
4.   
5.   
6. body {   
7.     padding: 0px;   
8.     margin: 0px;   
9.     color: #666;   
10. }   
11. #text-shadow-box {   
12.     position: relative;   
13.     width: 598px;   
14.     height: 406px;   
15.     background: #666;   
16.     overflow: hidden;   
17.     border: #333 1px solid;   
18. }   
19. #text-shadow-box div.wall {   
20.     position: absolute;   
21.     width: 100%;   
22.     top: 175px;   
23.     left: 0px   
24. }   
25. #text {   
26.     text-align: center;   
27.     line-height: 0.5em;   
28.     margin: 0px;   
29.     font-family: helvetica, arial, sans-serif;   
30.     height: 1px;   
31.     color: #999;   
32.     font-size: 80px;   
33.     font-weight: bold;   
34.     text-shadow: 5px -5px 16px #000;   
35. }   
36. div.wall div {   
37.     position: absolute;   
38.     width: 100%;   
39.     height: 300px;   
40.     top: 42px;   
41.     left: 0px;   
42.     background: #999;   
43. }   
44. #spotlight {   
45.     position: absolute;   
46.     width: 100%;   
47.     height: 100%;   
48.     top: 0px;   
49.     left: 0px;   
50.     background: url(images/spotlight.png) center -300px;   
51. }   
52. #spotlight a {   
53.     color:#ccc;   
54.     text-decoration:none;   
55.     position:absolute;   
56.     left:47%;   
57.     top:56%;   
58.     float:left;   
59. }   
60. a img { border:none; }   
61.   
62.   
63.   
64.   
65.   
66.   
67.       
68.       
69.         黑猫警长
      
70.         
      
71.