CSS3制作404立体字体_html/css_WEB-ITnose
程序员文章站
2022-05-15 18:02:09
...
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;
- }
推荐阅读
-
纯CSS3制作九款可爱复古相机_html/css_WEB-ITnose
-
css3 web字体记_html/css_WEB-ITnose
-
3D Grid Effect ? 使用 CSS3 制作网格动画效果_html/css_WEB-ITnose
-
CSS3制作苹果风格键盘_html/css_WEB-ITnose
-
纯CSS3制作九款可爱复古相机_html/css_WEB-ITnose
-
css3制作一个漂亮的按钮_html/css_WEB-ITnose
-
使用CSS3制作三角形小图标_html/css_WEB-ITnose
-
纯css3制作写轮眼开眼及进化过程[转]_html/css_WEB-ITnose
-
css3圆角边框制作方法_html/css_WEB-ITnose
-
CSS3制作苹果手机的Message图标,超强大_html/css_WEB-ITnose