検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 は 404 の 3 次元 font_html/css_WEB-ITnose を生成します

CSS3 は 404 の 3 次元 font_html/css_WEB-ITnose を生成します

WBOY
WBOYオリジナル
2016-06-24 11:33:241339ブラウズ

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:太字;
    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: すべて .1 秒リニア;
    37. トランジション: すべて .1 秒リニア;
    38. }
    40. .demo p:first-child span:hover {
    41. text-シャドウ:0px0px2px#686868,
    42. 0px1px1px#fff,
    43. 0px2px#fff,
    44. 0px3px1px#fff,
    45. 0px4px1px#fff,
    46. 0px5px1px#fff,
      47. 6 px1px#fff,
      48. 0px7px1px#777,
      49. 0px8px3px#fff,
      50. 0px9px5px#fff,
      51. 0px10px7px#fff,
      52. 0px11px9px#fff,
      53. 0px12px11px#fff,
      54. 0px13px15px#fff;
    54. -webキットトランジション: すべて .1 秒のリニア;
    55. トランジション:すべて .1s Linear;
    56. }
    58. .demo p:not(:first-child){
    59. text-align: center;
    60. color:#666;
    61. font-family: cursive;
    62. font -size:20px;
    63. text-shadow:01px0#fff;
    64. Letter-spacing:1px;
    65. line-height:2em;
    66. margin-top:-50px;
    67. }

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：HTML と CSS の概要 -- 第 4 章 カスケード スタイル シートについて_html/css_WEB-ITnose次の記事：HTML と CSS の概要 -- 第 4 章 カスケード スタイル シートについて_html/css_WEB-ITnose

    関連記事

    続きを見る