手把手教你实现文字悬停分割效果

一条会coding的Shark
2,473 阅读5分钟

前言

相信大伙都知道悬停效果吧，鼠标悬停的应用场景非常多，它是一个比较常见的功能。因此基于鼠标悬停来扩展的效果也是非常多的，今天就带大家来实现一个在文字上进行悬停分割的效果。

效果预览

效果展示如下：

HTML结构

我们先来编写好一段文本作为HTML结构基础，相关代码如下所示：

 <h2>
        BELIEVE
        <span>BELIEVE</span>
        <span>BELIEVE</span>
        <span>in yourself</span>
 </h2>

这一部分比较简单，文本内容可以自由发挥，接下来直接进入CSS样式的设计。

CSS样式

搭建好基础结构，就需要为它设计样式了，因为我们实现的是文字悬停分割效果，所以我们可以把该效果分为两个小部分来理解，一个是悬停，一个是分割。对于悬停，相信大家都知道可以使用:hover来实现，那么关于分割如何实现呢？咱们接着往下看。

文本内容

我们先对文本内容进行样式处理。

h2 span:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
    color: #000;
    transition: 0.5s;
    overflow: hidden;
}

首先给第一个span子元素设置样式。将元素的定位方式设置为绝对定位，使其脱离文档流，再将元素的顶部和左侧边距都设置为0，使其相对于父元素的左上角定位。通过transition来为元素设置一个持续时间为0.5秒的过渡效果。最后overflow: hidden将溢出的内容隐藏起来，不显示在元素的边界之外。

然后第二个span子元素的样式基本同理，这里就不展示了，需要完整代码可以前往码上掘金查看。

h2 span:nth-child(3){
    ......
    transform: translateY(-50%) scaleY(0);
    ......
    font-size: 0.25em;
    ......
    ......
    transition: .5s;
}

这个是第三个span子元素的样式了。这里的样式和上面不一样，第三个span子元素是分割之后展示的内容，现在带大家来理解一下该样式（简单的部分不会过多介绍，会主要介绍重要属性）。

首先使用transform属性进行元素的变换，transform: translateY(-50%) scaleY(0); ，translateY(-50%)表示向上移动50% 的自身高度，scaleY(0)表示在Y轴方向上不显示元素（高度为0）。

然后对字体大小做出限制，因为是悬停分割后的内容，所以这里我们将子元素的字体大小为父元素字体大小的0.25倍。

最后就是一个过渡动画了transition: .5s，使得元素的过渡效果在0.5秒内完成。

悬停分割

上面是关于文本内容的样式处理，接下来是关于悬停分割的样式处理了。

h2:hover span:nth-child(1){
    transform: translateY(-18px);
}
h2:hover span:nth-child(2){
    transform: translateY(18px);
}
h2:hover span:nth-child(3){
    transform: translateY(-50%) scaleY(1);
}

首先，:hover伪类选择器表示当鼠标悬停在h2元素上时触发样式变化。接下来，span:nth-child(x)选择器表示选择h2元素内部的第x个span元素。例如，span:nth-child(1)选择第一个span元素，span:nth-child(2)选择第二个span元素，以此类推。 然后，transform: translateY(-18px);表示对选中的span元素应用向上平移18像素的变换效果。类似地，transform: translateY(18px);表示对第二个span元素应用向下平移18像素的变换效果。最后，transform: translateY(-50%) scaleY(1);表示对第三个span元素应用向上平移50% 的高度，并保持原始的垂直缩放比例。

简单来说就是，一个span元素向上移动，另一个span元素向下移动，这样就可以达到看似分割的效果了。当然，光凭这些还远远不够，除此之外，还需要在这两个span元素内加入其他样式，相关代码如下：

h2 span:nth-child(1){
    clip-path: polygon(0 0,100% 0, 100% 50%, 2% 50%);
}
h2 span:nth-child(2){
    clip-path: polygon(0 50%,100% 50%, 100% 100%, 0% 100%);
}

这里介绍一个重要的属性：clip-path属性。它是用来定义元素的裁剪路径。polygon(0 0,100% 0, 100% 50%, 2% 50%)表示使用多边形裁剪路径，该路径包含四个点，分别是(0, 0)，(100%, 0)，(100%, 50%)，(2%, 50%)。这个裁剪路径的效果是从左上角到右上角，然后沿着右边界向下收缩到中点位置。这样的裁剪路径将使得第一个span子元素的上半部分显示，下半部分被裁剪掉。

同样的，第二个span子元素路径包含四个点，分别是(0, 50%)，(100%, 50%)，(100%, 100%)，(0%, 100%)。这个裁剪路径的效果是从左边界的中点位置向右收缩到右下角。 因此，裁剪路径将使得第二个span子元素的下半部分显示，上半部分被裁剪掉。

因此，悬停分割的效果就这样实现了。

总结

以上就是整个效果的实现过程了，整体而言并不难，大家可以花个几分钟时间去尝试一下这个效果，甚至还可以在此效果上继续发挥自己的创意，打造出另一个意想不到的效果。

avatar
文章
阅读
粉丝