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. P4110 [HEOI2015]小L的白日梦

    传送门 题解 //minamoto #include<bits/stdc++.h> using namespace std; typedef long long ll; typedef l ...

  2. swoole多进程处理产生的问题

    以前用swoole的时候,没有涉及到数据库连接,碰到问题没有那么多,后来公司业务原生来写swoole多进程,问题出现很多 1.多进程之间会产生进程隔离,global无效,不能共用一个mysql,red ...

  3. c语言 error C4996: 'strupr': The POSIX name for this item is deprecated. Instead, use the ISO C and C++ conformant name

    问题: 在使用visual studio 2013,进行调试执行代码时,出现如下错误: error C4996: 'strupr': The POSIX name for this item is d ...

  4. 【洛谷3345_BZOJ3924】[ZJOI2015]幻想乡战略游戏（点分树）

    大概有整整一个月没更博客了 -- 4 月为省选爆肝了一个月,最后压线进 B 队,也算给 NOIP2018 翻车到 316 分压线省一这个折磨了五个月的 debuff 画上了一个不算太差的句号.结果省选 ...

  5. 最大流增广路(KM算法) HDOJ 1533 Going Home

    题目传送门 /* 最小费用流:KM算法是求最大流,只要w = -w就可以了,很经典的方法 */ #include <cstdio> #include <cmath> #incl ...

  6. redis 配置多个ip 解决方案

    因为在 redis 中bind 指定的ip 其实为同一网段或localhost 监听ip,在这里配置 内网其他网段或者外网多个ip 后  重启 redis 是不会成功的, 这边建议使用 折中方案,开通 ...

  7. MVC之模型绑定

    1.前言 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方 ...

  8. 用Python利用pyFirmata控制Arduino实现Blink

    2018-03-2809:20:44 arduino中有相应的库 1.安装pyFirmata包 pip install pyFirmata 在python2.7或python3.X下都可以执行. py ...

  9. url-safe base64 && base64

    1: 为什么需要base64? ASCII码一共规定了128个字符的编码,这128个符号,范围在[0,127]之间. 其中,[0,31],及127, 33个属于不可打印的控制字符. 在电子邮件传输信息 ...

  10. vba txt读写的几种方式

    四种方式写txt 1.这种写出来的是ANSI格式的txt Dim TextExportFile As String TextExportFile = ThisWorkbook.Path & & ...