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. golang——database/sql包学习

    1.database/sql包 sql包提供了保证SQL或类SQL数据库的泛用接口. 使用sql包时必须注入(至少)一个数据库驱动. (1)获取mysql driver:go get -v githu ...

  2. 洛谷 P1064 金明的预算方案(有依赖的背包问题)

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”.今 ...

  3. 数据结构之链式队列(C实现)

    1.1  linkqueue.h #ifndef LINKQUEUE_H #define LINKQUEUE_H #include <stdio.h> #include <mallo ...

  4. Manacher HDOJ 5371 Hotaru's problem

    题目传送门 /* 题意:求形如(2 3 4) (4 3 2) (2 3 4)的最长长度,即两个重叠一半的回文串 Manacher:比赛看到这题还以为套个模板就行了,因为BC上有道类似的题,自己又学过M ...

  5. 398 Random Pick Index 随机数索引

    给定一个可能含有重复元素的整数数组,要求随机输出给定的数字的索引. 您可以假设给定的数字一定存在于数组中.注意:数组大小可能非常大. 使用太多额外空间的解决方案将不会通过测试.示例:int[] num ...

  6. elasticsearch 查询优化

    首先对不必要的字段不做分词也就是不做索引,禁止内存交换 1.shard 一个Shard就是一个Lucene实例,是一个完整的搜索引擎. 分片数过多会导致检索时打开比较多的文件,多台服务器之间通讯成本加 ...

  7. 动态属性ExpandoObject

    1.动态创建对象及其属性ExpandoObject 查看ExpandoObject的定义:

  8. [ GDOI 2014 ] 拯救莫莉斯

    \(\\\) \(Description\) 有一个 \(N\times M\) 的网格,每个格点都有权值,图是四连通的. 现在选择一个点集,使得每个格点要么被选中,要么连通的点之一被选中. 求这个点 ...

  9. poj2240 Arbitrage

    思路: 有向图判负环. 实现: (1)spfa #include <iostream> #include <map> #include <string> #incl ...

  10. Spark学习之数据读取与保存（4）

    Spark学习之数据读取与保存(4) 1. 文件格式 Spark对很多种文件格式的读取和保存方式都很简单. 如文本文件的非结构化的文件,如JSON的半结构化文件,如SequenceFile结构化文件. ...