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结束-->
  16. </body>
  17. </html>
 
 
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. }
 

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. easyui图标对照

    转自:https://blog.csdn.net/qq_34545192/article/details/78250816 原作者文章地址: http://www.cnblogs.com/timeme ...

  2. java运行jdk连接mysql出现了:Establishing SSL connection without server's identity verification is not recommended

    注意:出现这类提示也不会影响对数据库的增删改查操作,所以不用紧张.. 在运行练习时出现下面的错误信息提示: Establishing SSL connection without server's i ...

  3. SVG Path标签 A 参数

    A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx:x轴半径ry:y轴半径x-axis-rotation:指椭圆的X轴与水平方向顺时针方向夹 ...

  4. bzoj 3733: [Pa2013]Iloczyn【dfs】

    参考:http://www.cnblogs.com/clrs97/p/5125976.html 瞎搞约数失败...滚去搜索 dfs(x,y,z) 表示当前可选第x到第m个约数,还要选y个约数,已有z的 ...

  5. P1128 [HNOI2001]求正整数

    传送门 rqy是我们的红太阳没有它我们就会死 可以考虑dp,设\(dp[i][j]\)表示只包含前\(j\)个质数的数中,因子个数为\(i\)的数的最小值是多少,那么有转移方程 \[f[i][j]=m ...

  6. SpringBoot整合SpringSecurity简单案例

    在我们开发项目的过程中经常会用到一些权限管理框架,Java领域里边经常用的可能就是shiro了,与之对应的还有SpringSecurity,SpringSecurity可以说是非常强大,与Spring ...

  7. 最大流增广路(KM算法) HDOJ 2255 奔小康赚大钱

    题目传送门 /* KM:裸题第一道,好像就是hungary的升级版,不好理解,写点注释 KM算法用来解决最大权匹配问题: 在一个二分图内,左顶点为X,右顶点为Y,现对于每组左右连接Xi,Yj有权w(i ...

  8. Storm编程入门API系列之Storm的可靠性的ACK消息确认机制

    概念,见博客 Storm概念学习系列之storm的可靠性  什么业务场景需要storm可靠性的ACK确认机制? 答:想要保住数据不丢,或者保住数据总是被处理.即若没被处理的,得让我们知道. publi ...

  9. layer父页获取弹出层输入框里面的值

    主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的 ...

  10. P1823 音乐会的等待

    题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看得见的. ...