你的位置:首页 > 网页设计

[网页设计]CSS3制作404立体字体


CSS3制作404立体字体页面效果

 

 
鼠标移动上去,背景色变白。
 

 
 
动态效果:
 
12.gif
 
  1. .demo p:first-child span:hover {
  2. text-shadow:0px0px2px#686868,
  3. 0px1px1px#fff,
  4. 0px2px1px#fff,
  5. 0px3px1px#fff,
  6. 0px4px1px#fff,
  7. 0px5px1px#fff,
  8. 0px6px1px#fff,
  9. 0px7px1px#777,
  10. 0px8px3px#fff,
  11. 0px9px5px#fff,
  12. 0px10px7px#fff,
  13. 0px11px9px#fff,
  14. 0px12px11px#fff,
  15. 0px13px15px#fff;
  16. -webkit-transition: all .1s linear;
  17. transition: all .1s linear;
  18. }

用来多个文字阴影,达到和用PS一样的效果。

还是用PS来的方便。
 
 
HTML代码:
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8/>
  5. <title>CSS3制作404立体字体页面效果</title>
  6. <link rel="stylesheet" type="text/css" href="css/my.css">
  7. </head>
  8. <body>
  9. <h1 class="keTitle">CSS3制作404立体字体页面效果</h1>
  10. <!--效果html开始-->
  11. <div class="demo">
  12. <p align="center"><span>4</span><span>0</span><span>4</span></p>
  13. <p align="center">该页面不存在(´・ω・`)</p>
  14. </div>
  15. <!--效果html结束-->
  16. </body>
  17. </html>

 

 
CSS代码:
 
  1. @charset"utf-8";
  2. body {
  3. background-color:#ECECEC;
  4. font-family:'Open Sans', sans-serif;
  5. font-size:14px;
  6. color:#3c3c3c;
  7. }
  8. .demo p:first-child {
  9. text-align: center;
  10. font-family: cursive;
  11. font-size:150px;
  12. font-weight: bold;
  13. line-height:100px;
  14. letter-spacing:5px;
  15. color:#fff;
  16. }
  17. .demo p:first-child span {
  18. cursor: pointer;
  19. text-shadow:0px0px2px#686868,
  20. 0px1px1px#ddd,
  21. 0px2px1px#d6d6d6,
  22. 0px3px1px#ccc,
  23. 0px4px1px#c5c5c5,
  24. 0px5px1px#c1c1c1,
  25. 0px6px1px#bbb,
  26. 0px7px1px#777,
  27. 0px8px3px rgba(100,100,100,0.4),
  28. 0px9px5px rgba(100,100,100,0.1),
  29. 0px10px7px rgba(100,100,100,0.15),
  30. 0px11px9px rgba(100,100,100,0.2),
  31. 0px12px11px rgba(100,100,100,0.25),
  32. 0px13px15px rgba(100,100,100,0.3);
  33. -webkit-transition: all .1s linear;
  34. transition: all .1s linear;
  35. }
  36. .demo p:first-child span:hover {
  37. text-shadow:0px0px2px#686868,
  38. 0px1px1px#fff,
  39. 0px2px1px#fff,
  40. 0px3px1px#fff,
  41. 0px4px1px#fff,
  42. 0px5px1px#fff,
  43. 0px6px1px#fff,
  44. 0px7px1px#777,
  45. 0px8px3px#fff,
  46. 0px9px5px#fff,
  47. 0px10px7px#fff,
  48. 0px11px9px#fff,
  49. 0px12px11px#fff,
  50. 0px13px15px#fff;
  51. -webkit-transition: all .1s linear;
  52. transition: all .1s linear;
  53. }
  54. .demo p:not(:first-child){
  55. text-align: center;
  56. color:#666;
  57. font-family: cursive;
  58. font-size:20px;
  59. text-shadow:01px0#fff;
  60. letter-spacing:1px;
  61. line-height:2em;
  62. margin-top:-50px;
  63. }