手把手教你让菜单悬停滑动起来

前言

在很早之前就做过很多和悬停相关的特效，这次给大家带来一个新的悬停效果——菜单悬停滑动。简单点理解就是在悬停的基础上让它滑动起来。我们来看看下面码上掘金的效果。

效果预览

HTML部分

首先我们来看基本的HTML部分，相关代码如下。

    <ul>
        <li><a href="#" data-text="Home">Home</a></li>
        <li><a href="#" data-text="About">About</a></li>
        <li><a href="#" data-text="Services">Services</a></li>
        <li><a href="#" data-text="Contact">Contact</a></li>
    </ul>

无序列表ul中包含四个列表项li，每个列表项都包含一个超链接a。在超链接a中data-text属性用于存储每个超链接的文本内容。总的来说就是创建一个导航菜单，其中包含了四个链接，分别是"Home"、"About"、"Services"和"Contact"。

CSS部分

接下来我们来讲解一下CSS部分。首先是关于ul列表的样式。

ul{
    position: relative;
    display: flex;
    flex-direction: column;
}
ul li{
    list-style: none;
    transition: 0.5s;
}

首先，ul元素被设置为相对定位，这意味着它的子元素可以使用相对于父元素的位置进行定位。然后，ul元素的display属性被设置为flex，这意味着它的子元素会按照垂直方向排列。接下来，li元素的样式被设置为无序列表样式，这样列表项不会显示默认的项目符号。最后，列表项的过渡效果被设置为0.5秒，这意味着当列表项的样式发生改变时，会以0.5秒的时间进行过渡动画。

对于超链接的样式，就是将无序列表中的链接文字以大写、非常粗体、无下划线的样式显示，并且字母间距稍微加大，具体代码部分可以查看码上掘金。

最后对超链接设置伪元素以及当鼠标移动到元素的时候应该有的样式，这里是实现悬停和滑动的关键部分。相关代码如下。

ul li a::before{
    content: attr(data-text);
    position: absolute;
    ......
    transform: translateX(0);
    transition: 0.5s;
    pointer-events: none;
}
ul li a:hover:before{
    transform: translateX(100%);
    opacity: 0;
}
ul li a::after{
    content: attr(data-text);
    position: absolute;
    ......
    transform: translateX(-100%);
    transition: 0.5s;
    pointer-events: none;
    opacity: 0;
    color: skyblue;
}
ul li a:hover:after{
    transform: translateX(0);
    opacity: 1;
}

首先，使用伪元素::before为每个a链接添加一个伪元素，并设置其内容为attr(data-text)，即a标签的data-text属性的值。这样就可以在a标签的文本前面添加一个与文本内容相同的元素。

然后，设置伪元素before的样式，包括绝对定位position: absolute，以及初始的平移变换（transform: translateX(0)）。还设置了过渡效果（transition: 0.5s）和禁用鼠标事件（pointer-events: none）。

接着，使用伪类:hover为伪元素设置鼠标悬停时的样式。通过改变平移变换的值（transform: translateX(100%)）和透明度（opacity: 0），这样来实现伪元素从左侧滑出并渐变消失的效果。

同理，再次使用伪元素::after为每个a链接添加另一个伪元素，并设置其内容为attr(data-text)，与之前的伪元素相同。

然后，设置伪元素after的样式，与之前的伪元素类似，但是这里没有设置文本描边，而是设置了初始的平移变换（transform: translateX(-100%)）和透明度（opacity: 0），以及文本颜色（color: skyblue）。

最后，使用伪类:hover为伪元素设置鼠标悬停时的样式。通过改变平移变换的值（transform: translateX(0)）和透明度（opacity: 1），这样来实现伪元素从右侧滑入并渐变出现的效果。

综上所述，这段代码实现了鼠标悬停时a链接文本前后出现不同效果的动画效果。

总结

以上就是菜单悬停滑动效果的实现过程了，整体来说非常简单，代码通俗易懂。这里面涉及到很多基础的CSS样式，大家可以通过这个效果去简单巩固一下CSS知识。欢迎大家在评论区里互相交流。