zoukankan      html  css  js  c++  java

  • 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结束-->
    17. </body>
    18. </html>
     
     
    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. }
     
  • 相关阅读:
    数据库之case when + group by 联合使用
    JAVA之JSON对象解析
    oracle导入表数据时遇到外键约束问题导致导入失败
    Oracle之会话阻塞
    cmd的操作命令导出导入.dmp文件
    性能优化理解
    JS原型与原型链的理解
    Promise实现原理
    Js运行机制Event Loop
    JS循环中断与异步for...in forEach map
  • 原文地址：https://www.cnblogs.com/moyuling/p/4971194.html
Copyright © 2011-2022 走看看