站长资源
全栈工程师站点

css文本断开错位效果的简单实现思路

文字断开效果,说白了就是让文字部分错位,这要是放在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;
}

效果如图所示:

css文本断开错位效果的简单实现思路 -1

上半部分文字变白以后,然后我们再利用:after伪类来进行同样的选取,然后利用定位把位置稍微平移,文字颜色设置为黑色,高度稍微小一些,让他们中间留出空隙

css代码如下:

.main h1:after {
  content: attr(data-font);
  position: absolute;
  left: -10px;
  overflow: hidden;
  width: 100%;
  height: 49%;
  color: black;
}

设置后效果如图:

css文本断开错位效果的简单实现思路 -2

我们发现图中已经有了文字错位断开的效果,但是还有一些边线再哪里,当然细心的同学可以想到3D透视文字的制作,我们这里看看如何将其去掉,这里用到文字的阴影属性text-shadow进行白色阴影投放,对其进行覆盖即可

我们在.main h1:after中加上如下代码:

text-shadow: 11px 2px 0 white, 12px -3px 0 white, -2px -3px 0 white;

大功告成,效果如下图:

css文本断开错位效果的简单实现思路 -3

附完整代码:

<!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原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: css文本断开错位效果的简单实现思路

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » css文本断开错位效果的简单实现思路

评论 抢沙发

评论前必须登录!