css3制作404立体字体页面效果

鼠标移动上去，背景色变白。

动态效果：

.demo p:first-child span:hover { text-shadow:0px0px2px#686868, 0px1px1px#fff, 0px2px1px#fff, 0px3px1px#fff, 0px4px1px#fff, 0px5px1px#fff, 0px6px1px#fff, 0px7px1px#777, 0px8px3px#fff, 0px9px5px#fff, 0px10px7px#fff, 0px11px9px#fff, 0px12px11px#fff, 0px13px15px#fff; -webkit-transition: all .1s linear; transition: all .1s linear; }

用来多个文字阴影，达到和用PS一样的效果。

还是用PS来的方便。

HTML代码：

css3制作404立体字体页面效果

404

该页面不存在(´･ω･`)

CSS代码：

@charset”utf-8″; body { background-color:#ECECEC; font-family:’Open Sans’, sans-serif; font-size:14px; color:#3c3c3c; } .demo p:first-child { text-align: center; font-family: cursive; font-size:150px; font-weight: bold; line-height:100px; letter-spacing:5px; color:#fff; } .demo p:first-child span { cursor: pointer; text-shadow:0px0px2px#686868, 0px1px1px#ddd, 0px2px1px#d6d6d6, 0px3px1px#ccc, 0px4px1px#c5c5c5, 0px5px1px#c1c1c1, 0px6px1px#bbb, 0px7px1px#777, 0px8px3px rgba(100,100,100,0.4), 0px9px5px rgba(100,100,100,0.1), 0px10px7px rgba(100,100,100,0.15), 0px11px9px rgba(100,100,100,0.2), 0px12px11px rgba(100,100,100,0.25), 0px13px15px rgba(100,100,100,0.3); -webkit-transition: all .1s linear; transition: all .1s linear; } .demo p:first-child span:hover { text-shadow:0px0px2px#686868, 0px1px1px#fff, 0px2px1px#fff, 0px3px1px#fff, 0px4px1px#fff, 0px5px1px#fff, 0px6px1px#fff, 0px7px1px#777, 0px8px3px#fff, 0px9px5px#fff, 0px10px7px#fff, 0px11px9px#fff, 0px12px11px#fff, 0px13px15px#fff; -webkit-transition: all .1s linear; transition: all .1s linear; } .demo p:not(:first-child){ text-align: center; color:#666; font-family: cursive; font-size:20px; text-shadow:01px0#fff; letter-spacing:1px; line-height:2em; margin-top:-50px; }