创意文字滑动效果，进来瞧一瞧

一条会coding的Shark
1,110 阅读4分钟

前言

前面给大家带来过一个创意菜单滑动的效果，紧接着我就学了另一个关于滑动的特效——文字滑动特效，先给大家看下静态效果是什么样子。

image.png

然后接下来给大家看看在码上掘金里面的动态效果。

效果预览

其实关于它的实现很简单，只需要掌握一些动画知识就可以把它实现出来，接下来就跟随我的节奏来实现它吧。

实现过程

具体的实现部分主要分为HTML部分和CSS部分。首先我们先来看到关于HTML是如何设计的

HTML部分

HTML部分代码如下。

<h2 data-text="Anyone">Anyone</h2>

这一部分比较简单直接。data-text="Anyone"：这是一个自定义的属性，用于存储额外的数据。在这里，data-text属性被赋值为Anyone，表示该标题的文本内容为Anyone。因此，这段代码表示一个带有文本内容Anyone的第二级标题。

CSS部分

接下来就是CSS部分了。首先来设置h2元素以及它的伪元素的样式。它的属性包括字体大小、颜色、文字描边等，相关代码如下。

h2::before{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    -webkit-text-stroke: 0vw #383d52;
    color: #01fe87;
    border-right: 1px solid #01fe87;
    overflow: hidden;
    animation: animate 6s linear infinite;
}

它是用来创建一个带有动画效果的伪元素（::before）在h2元素前面显示一个文本内容。

首先创建了一个伪元素h2::before，并设置了它的样式。它的内容是h2元素的data-text属性的值。它的位置是相对于h2元素的左上角，宽度为0。它的样式包括文字描边、颜色、边框等，这里应用到一个比较特殊的属性——>-webkit-text-stroke: 0vw #383d52;设置伪元素的文字描边样式为0vw宽度的 #383d52 颜色，是WebKit浏览器引擎的私有属性。最后还设置了动画效果，将伪元素应用一个名为animate的动画，持续时间为6秒，线性变化，并且无限循环播放。

总结来说，这段代码的作用是在h2元素前面创建一个动画效果的伪元素，该伪元素会显示h2元素的data-text属性的值，并通过动画使其逐渐显示出来。

接下来就是动画部分的代码了。

@keyframes animate {
    0%,10%,100%{
        width: 0;
    }
    70%,90%{
        width: 100%;
    }
}

这段代码定义了一个名为 animate 的关键帧动画。关键帧动画是一种在不同时间点上定义不同样式的动画效果。

在这个关键帧动画中，定义了四个关键帧（0%、10%、70%、90%和100%），并在不同关键帧上定义了不同的样式。

在0%、10% 和100% 的关键帧上，将元素的宽度设置为0，即元素开始时和结束时的宽度为0。

在70% 和90% 的关键帧上，将元素的宽度设置为100%，即元素在动画的中间部分宽度为100%。

这样，当应用这个关键帧动画到一个元素上时，元素的宽度会从0逐渐增加到100%，然后再逐渐减小回到0的过程中形成一个动画效果。

这段代码定义了名为animate的动画。它包含了两个关键帧，分别是0% 和70%。在0% 和100% 时，伪元素的宽度为0，即不可见。在70% 和90% 时，伪元素的宽度为100%，即完全可见。通过这个动画的播放，可以实现文字从不可见到完全可见的过程。

总结

以上就是该效果的实现过程了，整体而言并不难，主要是通过动画来实现这个滑动效果，完整代码可以在码上掘金里查看，有什么疑问大家可以在评论区讨论。

avatar
文章
阅读
粉丝