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

CSS3制作404立体字体的更多相关文章

  1. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  2. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  3. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  4. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  5. CSS3制作日历

    目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...

  6. CSS3制作

    目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...

  7. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  9. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

随机推荐

  1. bzoj 4424: Cf19E Fairy && codeforces 19E. Fairy【树形dp】

    参考:https://blog.csdn.net/heheda_is_an_oier/article/details/51131641 这个找奇偶环的dp1真是巧妙,感觉像tarjan一样 首先分情况 ...

  2. bzoj 1710: [Usaco2007 Open]Cheappal 廉价回文【区间dp】

    只要发现添加一个字符和删除一个字符是等价的,就是挺裸的区间dp了 因为在当前位置加上一个字符x就相当于在他的对称位置删掉字符x,所以只要考虑删除即可,删除费用是添加和删除取min 设f[i][j]为从 ...

  3. 10.13NOIP模拟题

    /* 容斥原理 考虑到a[i]要么不会太大,要么就对答案贡献很小 dfs即可 */ #include<bits/stdc++.h> #define ll long long #define ...

  4. 17年day3

    /* 嗯,又一天. 时日无多了,还能蹦哒几天? 上午依旧考试,日常挂T1,读错题.还是好困. 兔子说明天晚上要请我们吃水饺~~~~去年就没这待遇. 下午打开邮箱一看,咦?嗯. 昨晚做噩梦NOIP考了状 ...

  5. video 能播放声音不能播放视频，黑屏

    与视频编码格式有关,mp4的视频编码有三种:MPEG4(DivX),MPEG4(Xvid),AVC(H264). 浏览器播放视频的支持有限,MP4格式的视频只支持h.264的视频: 视频编码: AVC ...

  6. Jenkins+ant+jmeter接口自动化

    1.Jenkins新建slave节点 2.Jenkins新建job,配置job,关联到slave, 3.执行构建 build文件如下 <?xml version="1.0" ...

  7. jQuery实现将div中滚动条滚动到指定位置的方法

    1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...

  8. malloc()函数的使用

    malloc是向系统申请分配指定size个字节的内存空间.返回值类型为void *类型.void *表示未确定的类型指针.C语言中,void *类型可以强制转换为任何其他类型的指针. 语法:void ...

  9. php angular/think angular/php模版引擎

    在thinphp5中发现一个好用的模版引擎—think-angular, 此模板引擎主要特点是 不需要额外的标签定义, 全部使用属性定义, 写好的模板文件在IDE格式化代码的时候很整洁, 因为套完的模 ...

  10. js this 和 event 的区别

    今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式.因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么 ...