<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文本立体效果</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #808080;
}
h1 {
text-align: center;
font-size: 120px;
font-weight: 700;
position: relative;
font-family: "Montserrat";
color: #fff;
}
h1::before {
content: "DARKNESS";
position: absolute;
color: #000;
transform: translate(-50px, 21px) scaleY(0.5) skew(50deg);
z-index: -1;
filter: blur(5px);
mask-image: linear-gradient(transparent, #000);
-webkit-mask-image: linear-gradient(transparent, #000);
}
</style>
</head>
<body>
<h1>DARKNESS</h1>
</body>
</html>
本文介绍了如何使用HTML和CSS创建一个具有立体感的文本效果，通过:before伪元素和CSS3属性如transform,filter,mask-image实现文字‘DARKNESS’的视觉动态效果。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
