Maison > Article > interface Web > CSS3制作404立体字体_html/css_WEB-ITnose
CSS3制作404立体字体_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:33:241324parcourir
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立体字体页面效果 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;
- }
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML与CSS入门--第四章 理解层叠样式表_html/css_WEB-ITnoseArticle suivant：20151117小问题_html/css_WEB-ITnose