效果：
看似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>
总结：
冬至快乐呀~
本文链接：https://my.lmcjl.com/post/8560.html
展开阅读全文
4 评论