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. 19_传智播客iOS视频教程_类和对象

    什么是类?什么是对象? 看的见.摸的着.拿过来就可以直接使用.例如报纸就是一个对象. 学生这个东西可不可以只是指一个?就只有那一个才是学生.不是的,学生是有很多个的.它是对一类人的统称.类是统称.所以 ...

  2. P3297 [SDOI2013]逃考

    传送门 完全看不出这思路是怎么来的-- 首先对于两个亲戚,他们监视范围的边界是他们连线的中垂线.那么对于一个亲戚来说它能监视的范围就是所有的中垂线形成的半平面交 然后如果某两个亲戚的监视范围有公共边, ...

  3. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  4. Python中re操作正则表达式

    在python中使用正则表达式 1.转义符 正则表达式中的转义: '\('表示匹配小括号 [()+*/?&.] 在字符组中一些特殊的字符会现出原形 所有的\s\d\w\S\D\W\n\t都表示 ...

  5. 树形DP URAL 1039 Anniversary Party

    题目传送门 /* 题意:上司在,员工不在,反之不一定.每一个人有一个权值,问权值和最大多少. 树形DP:把上司和员工的关系看成根节点和子节点的关系,两者有状态转移方程: dp[rt][0] += ma ...

  6. EditText(1)EditText的类型和回车键的行为

    1,常见类型 <EditText android:id="@+id/email_address" android:layout_width="fill_parent ...

  7. HTML DOM getElementById() 方法

    定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用. 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素 ...

  8. 374 Guess Number Higher or Lower 猜数字大小

    我们正在玩一个猜数字游戏. 游戏规则如下:我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字.每次你猜错了,我会告诉你这个数字是大了还是小了.你调用一个预先定义好的接口 guess(int n ...

  9. ASP.NET控件之RadioButtonList

    “RadioButtonList”控件表示一个封装了一组单选按钮控件的列表控件. 可以使用两种类型的 ASP.NET 控件将单选按钮添加到网页上:各个“RadioButton”控件或一个“RadioB ...

  10. poj1240 Pre-Post-erous!

    思路: 根据前序序列和后序序列递归构造m叉树,确定每个节点的子节点数量.再用组合数公式累乘. 实现: #include <iostream> using namespace std; ][ ...