2.5D立体字体 html+css

效果：

看似2.5d立体，<(￣︶￣)>　其实是阴影的叠加~写完后你放大再放大看就一目了然了。

实现：

1.定义标签放字体：

 <div><p>LIFE OF PI</p></div>

2.css实现效果：

 div{font-size: 8em;font-weight: bold;color: rgb(255, 255, 255);transform: rotate(-20deg) skew(20deg);text-shadow:-1px 1px 0 rgb(161, 162, 167),-2px 2px 0 rgb(161, 162, 167),-3px 3px 0 rgb(161, 162, 167),-4px 4px 0 rgb(161, 162, 167),-5px 5px 0 rgb(161, 162, 167),-6px 6px 0 rgb(161, 162, 167);  }

transform: rotate(-20deg) skew(20deg);先旋转再倾斜；
text-shadow:
-1px 1px 0 rgb(161, 162, 167),
-2px 2px 0 rgb(161, 162, 167),
-3px 3px 0 rgb(161, 162, 167),
-4px 4px 0 rgb(161, 162, 167),
-5px 5px 0 rgb(161, 162, 167),
-6px 6px 0 rgb(161, 162, 167);
这就是一层一层的叠加阴影，定义越多那么字体越高，越立体。要多的话可以用js写for循环的加，我这就不写了~

3.真阴影，这是字体最下面的那层模糊的阴影：

 div::after{content: 'LIFE OF PI';position: absolute;top: 6px;left: -6px;color: #000;filter: blur(15px);z-index: -1;}

filter: blur(15px);模糊

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{height: 100vh;display: flex;justify-content: center;align-items: center;background-image: radial-gradient(white,black);}div{font-size: 8em;font-weight: bold;color: rgb(255, 255, 255);transform: rotate(-20deg) skew(20deg);text-shadow:-1px 1px 0 rgb(161, 162, 167),-2px 2px 0 rgb(161, 162, 167),-3px 3px 0 rgb(161, 162, 167),-4px 4px 0 rgb(161, 162, 167),-5px 5px 0 rgb(161, 162, 167),-6px 6px 0 rgb(161, 162, 167);  }div::after{content: 'LIFE OF PI';position: absolute;top: 6px;left: -6px;color: #000;filter: blur(15px);z-index: -1;}</style>
</head>
<body><div><p>LIFE OF PI</p></div>
</body>
</html>

总结：

冬至快乐呀~

2.5D立体字体 html+css相关推荐

typekit立体字体样式代码
下载地址 typekit立体字体样式代码,css实现的艺术字体样式特效. dd:
html字颜色代码,css 字体颜色(css color)
DIV CSS 字体颜色\css color知识实例讲解在DIV+CSS网页中控制字体颜色的CSS单词为color:+颜色值.这里DIVCSS5详细为大家介绍CSS 字体颜色color的运用(div ...
字体系列之字体大小(CSS、HTML)
字体系列之字体大小(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta char ...
字体系统之字体粗细(CSS、HTML)
字体系统之字体粗细(CSS.HTML) <!DOCTYPE html> <html lang="en"><head><meta chars ...
CSS字体系列(CSS、HTML)
CSS字体系列(CSS.HTML) <!DOCTYPE html> <html lang="en"><head><meta charset ...
html中font-family样式,详解中文字体在CSS样式中font-family对应的英文名称
宋体:SimSun 黑体:SimHei 微软雅黑:Microsoft YaHei 微软正黑体:Microsoft JhengHei 新宋体:NSimSun 新细明体:PMingLiU 细明体:Ming ...
html a字体字号,A标签字体大小css布局实例教程
html超链接A标签字体大小设置教程篇超链接a标签内文字配置色调,旋转超链接色调样式人人或是对比熟悉,那末偶然一篇文章或一个段落,或一个小一部分使用a锚文本超链接,需要css设置装备摆设差距字体大小 ...
css宋体代码_css 字体颜色(css color)
DIV CSS 字体颜色\css color知识实例讲解在DIV+CSS网页中控制字体颜色的CSS单词为color:+颜色值.这里DIVCSS5详细为大家介绍CSS 字体颜色color的运用(div ...
页面可用性之浏览器默认字体与CSS中文字体
一.浏览器默认字体众所周知,浏览器字体默认的设置为"宋体/simsun字体 16像素",例如Chrome浏览器下: 二.CSS中设置的字体考虑到兼容性,我们总会在CSS中队字体 ...

2.5D立体字体 html+css

效果：

实现：

总结：

2.5D立体字体 html+css相关推荐

最新文章

热门文章