[分享]css3文字的点击效果代码

CSS3提供了很多有趣的文字效果，其中之一就是文字点击效果。通过为文字添加点击效果，可以使网页更加生动有趣。下面是一段CSS3文字点击效果的代码：/文字点击效果/ .clickabletext { d...

CSS3提供了很多有趣的文字效果，其中之一就是文字点击效果。通过为文字添加点击效果，可以使网页更加生动有趣。下面是一段CSS3文字点击效果的代码：

/*------------------------文字点击效果------------------------*/
.clickable-text {
    display: inline-block;
    position: relative;
    color: #3899ec;
    text-align: center;
    cursor: pointer;
}

.clickable-text:hover:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #3899ec;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}

.clickable-text:hover:after {
    transform: scaleX(1);
} 

首先，我们为要添加点击效果的文字设置一个class名，这里用的是“clickable-text”。在这个class中，我们设定文字的一些基本样式，如inline-block显示方式、相对定位、颜色、居中对齐和手型光标。

接着，我们使用:hover伪类来设置鼠标悬浮文字时的效果。:hover后面跟着的是伪元素:before或:after，这里我们使用了:after伪元素。在这个伪元素中，我们设置了一个背景颜色为蓝色的长方形，它的位置在文字下方2px的位置。同时，我们使用了CSS3的transform属性将这个长方形的宽度设为0，这样它就看不到了。

然后，我们为:after伪元素设置了一个transition（过渡）的效果，当这个伪元素的属性值发生变化时，它会以0.3秒的时间渐变到新的属性值。然后，我们在:hover后面又写了一遍:after伪元素，并将它的transform属性的值设为scaleX(1)，这样它就会从宽度0到100%的状态过渡，实现一个文字点击效果。

最后，我们可以在HTML中使用这个class名来为想要添加点击效果的文字进行添加。

<p>这是一个<span class="clickable-text">可以点击的文字</span>样式效果</p> 

通过这样的CSS3代码，我们可以为网页添加很多有趣、生动的动态效果。