CSS 3D 等距文本效果和Javascript
CSS 3D 等距文本效果 | CSS 和原生 Javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f1f1f1;
overflow: hidden;
}
#text{
position: relative;
color: #fff;
font-weight: 700;
font-size: 12em;
line-height: 0.9em;
letter-spacing: 2px;
text-align: center;
transform: rotate(-28deg) skew(25deg);
}
#text:before{
content: attr(deta-text);
position: absolute;
top: 30px;
left: -30px;
color: rgba(0, 0, 0, 0.3);
text-shadow: none;
filter: blur(8px);
z-index: -1;
}
</style>
</head>
<body>
<div id="text" deta-text='liuzhixi.cn'>liuzhixi.cn</div>
<script>
let text = document.querySelector("#text");
let shadow = '';
for (var i = 0; i <30; i++) {
shadow += (shadow? ',':'')+ -i*1+'px '+ i*1+'px 0 #d9d9d9';
}
text.style.textShadow = shadow;
</script>
</body>
</html>版权声明：本文由 LzxBlog 发布，如需转载请注明出处。
