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. Vue.js实战 5.5章 购物车

    <!DOCTYPE html> <html lang="en"> <head> <title>购物车示例</title> ...

  2. js数值型遇0开始自动转换为8进制

    如题,今天在项目更新时发现了js的这个自动转换问题,代码如下: var num = 0110; render:function(num){       var html="<a hre ...

  3. E2017E0605-hm

    carbon copy 抄送, 抄写与送达 blind carbon copy 密送 blind   adj. 失明的; 盲目的,轻率的; contact    n. 接触; 触点 v 联系,接触; ...

  4. bzoj 1621: [Usaco2008 Open]Roads Around The Farm分岔路口【dfs】

    模拟就行--讲道理这个时间复杂度为啥是对的??? #include<iostream> #include<cstdio> using namespace std; int k, ...

  5. bzoj题目大体分类

    http://m.blog.csdn.net/article/details?id=51387623

  6. Akka源码分析-Cluster-ClusterClient

    ClusterClient可以与某个集群通信,而本身节点不必是集群的一部分.它只需要知道一个或多个节点的位置作为联系节点.它会跟ClusterReceptionist 建立连接,来跟集群中的特定节点发 ...

  7. Hdu 4612 Warm up (双连通分支+树的直径)

    题目链接: Hdu 4612 Warm up 题目描述: 给一个无向连通图,问加上一条边后,桥的数目最少会有几个? 解题思路: 题目描述很清楚,题目也很裸,就是一眼看穿怎么做的,先求出来双连通分量,然 ...

  8. 如何手工搭建本地Yum仓库

    如何手工搭建本地Yum仓库(重点推荐)  https://www.linuxidc.com/Linux/2016-09/135480.htm CentOS7.2 创建本地YUM源和局域网YUM源: h ...

  9. 仿ofo单车做一个轮播效果

    github地址 首先我是利用swiper.js做的,因为这个很强大,哈哈~~,上代码 html很简单 <body> <div class="swiper-containe ...

  10. http请求和响应头部

    说一说常见的请求头和响应头都有什么呢? 1)请求(客户端->服务端[request])     GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1 ...