search

Home >Web Front-end >HTML Tutorial >CSS3制作404立体字体_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:33:241360browse

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代码：

 

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

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

  12. 404

  13. 该页面不存在(´･ω･`)

  •  

     

    CSS代码：

     

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

     

     

    • Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：HTML与CSS入门--第四章 理解层叠样式表_html/css_WEB-ITnoseNext article：20151117小问题_html/css_WEB-ITnose

    Related articles

    See more