Heim > Artikel > Web-Frontend > CSS3制作404立体字体_html/css_WEB-ITnose
CSS3制作404立体字体_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:241309Durchsuche
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;
- }
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML与CSS入门--第四章 理解层叠样式表_html/css_WEB-ITnoseNächster Artikel：20151117小问题_html/css_WEB-ITnose