2.5d立体文字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=750">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ddd;
perspective: 500px;
}
div {
margin: 200px auto;
color: #fff;
font-size: 100px;
text-align: center;
transform: rotate3d(0, 0, 1, -20deg) skew(20deg);
font-weight: 900;
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #ddd,
-3px 3px 0 #ddd,
-4px 4px 0 #ddd,
-5px 5px 0 #ddd,
-6px 6px 0 #ddd,
-7px 7px 0 #ddd,
-8px 8px 0 #ddd,
-9px 9px 0 #ddd,
-10px 10px 0 #ddd,
-11px 11px 0 #ddd,
-12px 12px 0 #ddd,
-13px 13px 0 #ddd,
-14px 14px 0 #ddd,
-15px 15px 0 #ddd,
-16px 16px 0 #ddd,
-17px 17px 0 #ddd,
-18px 18px 0 #ddd,
-19px 19px 0 #ddd,
-20px 20px 10px #333;
/* filter: blur(1px); 高斯模糊 */
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
