首頁 > web前端 > html教學 > CSS3制作404立体字体_html/css_WEB-ITnose

CSS3制作404立体字体_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:33:24
原創
1362 人瀏覽過

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

 

 

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

 

 

 

动态效果:

 

 

  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. CSS3制作404立体字体页面效果
  2. CSS3制作404立体字体页面效果

  3. 404

  4. 该页面不存在(´・ω・`)

  •  

     

    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. }

     

     

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門推薦
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板