站长资源文字断开效果，说白了就是让文字部分错位，这要是放在PS上解决自然是很简单的事情，不过用代码如何去实现呢。
下面就来一步步教大家如何去实现
首先我们写一段HTML基础代码：
<div class="main"> <h1>WANGDAHAI.CN</h1> </div>
加上适当的css修饰：
body {
background: white;
padding: 2rem;
}
h1 {
font-size: 10vw;
position: relative;
font-weight: 900;
color: #fff;
}
.main {
width: 100%;
font-family: sans-serif;
margin: 0 auto;
height: 100%;
}
.main h1 {
color: black;
text-align: center;
width: 100%;
background: white;
}
现在的想法是如何让文字的部分位置进行错位，我们的想法是选取文字的一部分然后进行平移处理，我们想到了css伪类:before或者:after来选取一部分文字，如何选取，我们这里要用到html5的自定义属性data-xxx以及css3的attr选择器
html部分修改为：
<div class="main"> <h1 data-font="WANGDAHAI.CN">WANGDAHAI.CN</h1> </div>
css部分我们先用:before伪类来选取上半部分文字，然后把他的文字颜色变成和背景一样的颜色，这里是白色
代码如下：
.main h1:before {
content: attr(data-font);
position: absolute;
left: 0;
overflow: hidden;
width: 100%;
height: 50%;
color: white;
text-align: center;
}
效果如图所示：
上半部分文字变白以后，然后我们再利用:after伪类来进行同样的选取，然后利用定位把位置稍微平移，文字颜色设置为黑色，高度稍微小一些，让他们中间留出空隙
css代码如下：
.main h1:after {
content: attr(data-font);
position: absolute;
left: -10px;
overflow: hidden;
width: 100%;
height: 49%;
color: black;
}
设置后效果如图：
我们发现图中已经有了文字错位断开的效果，但是还有一些边线再哪里，当然细心的同学可以想到3D透视文字的制作，我们这里看看如何将其去掉，这里用到文字的阴影属性text-shadow进行白色阴影投放，对其进行覆盖即可
我们在.main h1:after中加上如下代码：
text-shadow: 11px 2px 0 white, 12px -3px 0 white, -2px -3px 0 white;
大功告成，效果如下图：
附完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css断开的文本效果的简单实现思路</title>
<style>
body {
background: white;
padding: 2rem;
}
h1 {
font-size: 10vw;
position: relative;
font-weight: 900;
color: #fff;
}
.main {
width: 100%;
font-family: sans-serif;
margin: 0 auto;
height: 100%;
}
.main h1 {
color: black;
text-align: center;
width: 100%;
background: white;
}
.main h1:before {
content: attr(data-font);
position: absolute;
left: 0;
overflow: hidden;
width: 100%;
height: 50%;
color: white;
text-align: center;
}
.main h1:after {
content: attr(data-font);
position: absolute;
left: -10px;
overflow: hidden;
width: 100%;
height: 49%;
color: black;
text-shadow: 11px 2px 0 white, 12px -3px 0 white, -2px -3px 0 white;
}
</style>
</head>
<body>
<div class="main">
<h1 data-font="WANGDAHAI.CN">WANGDAHAI.CN</h1>
</div>
</body>
</html>
本文由站长资源www.wangdahai.cn原创首发，转载请注明出处
评论前必须登录！
注册