我申请了第一期金石计划挑战赛——瓜分奖金池10万。 这是我的第三篇文章。 点击查看活动详情
通过transition过渡属性，可以将相关css属性的改变变成一个持续一段时间的连续过程，而不是让css样式的改变立即生效，而是按照指定的曲线速度进行改变。
如下，借助transition过渡，通过改变元素的位置来实现背景跟随按钮或菜单滑动的效果。 位置的改变需要经过一段时间，从而形成滑动的效果。
后台遵循滑动实现html和基本css
给定用于显示菜单按钮的导航元素，为每个按钮使用 a 元素（按钮元素也是可接受的）。
<nav>
<a href="#">主页</a>
<a href="#">博客</a>
<a href="#">随笔手记</a>
<a href="#">关于此</a>
<a href="#">联系</a>
<div class="animation"></div>
<div class="animation-shadow"></div>
</nav>
然后，设置导航菜单的基本css，并设置整体的背景。 nav的定位是相对的，背景颜色元素的位置需要定位才能改变。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* background: #2c3e50; */
background: #7bbdff;
}
nav{
position: relative;
margin: 270px auto 0;
width: 580px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .3);
}
nav a{
font-size: 18px;
text-transform: uppercase;
/* 文字阴影 */
text-shadow: 1px 2px 3px rgba(0, 0, 0, .6);
color: white;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
width: 110px;
}
nav a:nth-child(3){
width:135px;
}
nav a:nth-child(4){
width:115px;
}
字体大小：0； 用于消除一些行内元素造成的间隙问题，并且其中的子元素需要指定font-size，否则文本将无法显示。
text-transform 用于设置文本的变换，如大小写、首字母小写、反转等html5滑动菜单，仅对英文字母有效。
z-index指定一个元素堆叠顺序，用于按默认顺序显示在背景元素之上，以免遮挡文本。
位置：相对； 需要指定，可以测试一下，如果取消relative，当前元素会被背景元素（absolute）遮挡，即z-index不起作用。
设置导航菜单的长度html5滑动菜单，并根据不同菜单项的需要改变大小。 如果间距都一样，可以直接按比例除宽度长度，背景元素的位置也可以按比例。
背景元素的设置跟随的背景元素
html 中的 .animation 和 .animation-shadow 元素作为背景或下划线/上划线元素存在。 通过键盘悬停和点击样式，改变背景或下划线/上划线元素的位置，实现滑动效果。
当在菜单项上单击 .active 时，.animation 用作背景元素。
当 .animation-shadow 用作悬停时，从 .active 菜单项向下滑动的蓝色背景元素。
nav .animation,nav .animation-shadow{
position: absolute;
/* 背景跟随 */
height: 100%;
top: 0;
/* 顶部线条跟随 */
/* height: 10%;
top: 0; */
/* 底部线条跟随 */
/* height: 10%;
bottom: 0; */
z-index: 0;
background: #1abc9c;
border-radius: 8px;
transition: all .5s ease 0s;
}
nav .animation-shadow{
background: rgba(26, 188, 156, .4);
}
上面的评论已经给出了不同的高度和位置可以实现相应的“背景跟随”、“上腰线跟随”、“下腰线跟随”。
指定大于导航菜单的 z-index
背景元素间距默认是没有给定的，否则会显示在默认位置，我们需要点击后显示在对应的位置。
过渡指定过渡变化的属性：
背景元素的style属性发生变化
之后，需要设置每个导航菜单/按钮被激活或悬停时对应的“背景框”（背景元素）的位置和大小。 需要为每个人设置将动画连接到相应的位置，并且该位置的大小与菜单的按键相同。
点击第一个菜单按钮（点击激活会添加一个活动类）并悬停后对应背景元素（.animation）和浅色背景元素（.animation-shadow）的样式。
第一个菜单按钮的左侧距离为0，菜单按钮的宽度为110px。
nav a:nth-child(1).active ~ .animation,
nav a:nth-child(1).active ~ .animation-shadow,
nav a:nth-child(1):hover ~ .animation-shadow{
width: 110px;
left: 0;
}
然后剩下的四个元素位置和大小：
nav a:nth-child(2).active ~ .animation,
nav a:nth-child(2).active ~ .animation-shadow,
nav a:nth-child(2):hover ~ .animation-shadow
{
width: 110px;
left: 110px;
}
nav a:nth-child(3).active ~ .animation,
nav a:nth-child(3).active ~ .animation-shadow,
nav a:nth-child(3):hover ~ .animation-shadow{
width: 135px;
left: 220px;
}
nav a:nth-child(4).active ~ .animation,
nav a:nth-child(4).active ~ .animation-shadow,
nav a:nth-child(4):hover ~ .animation-shadow
{
width: 115px;
left: 355px;
}
nav a:nth-child(5).active ~ .animation,
nav a:nth-child(5).active ~ .animation-shadow,
nav a:nth-child(5):hover ~ .animation-shadow{
width: 110px;
left: 470px;
}
原生js处理点击操作
为菜单按钮元素a添加点击风暴。 事件处理时，去掉其他菜单按钮的active类，给当前元素添加.active，实现背景元素的样式设置生效。
然而，对于hover来说，菜单按钮元素被点击激活，浅色背景元素的设置也生效。 如果菜单按钮后面的按钮悬停时，由于黑色背景元素的位置和大小已经指定，且样式设置位于前面，会覆盖上面悬停的样式，即不会生效。
具体表现为hover上的菜单按钮没有滑动效果，如下：
因此需要通过js进行处理，通过改变position和size的样式，使得权重小于css样式表中的position和size，这样“向后”滑动才会生效。
const navas=document.querySelectorAll('nav a');
const nava_shadow=document.querySelector('nav .animation-shadow');
navas.forEach(nava=>{
nava.addEventListener('click',function(){
// 测试，极个别情况下，点击无效，需要多点一次
navas.forEach(a=>a.classList.remove('active'));
this.classList.add('active');
});
// 处理hover时的样式问题
nava.addEventListener('mouseover',function(){
let shadowLeft=0;
let preva=this.previousElementSibling;
while(preva){
shadowLeft+=preva.offsetWidth;
preva=preva.previousElementSibling;
}
nava_shadow.style.width=this.offsetWidth+'px';
nava_shadow.style.left=shadowLeft+'px';
});
nava.addEventListener('mouseleave',function(){
nava_shadow.style.width=null;
nava_shadow.style.left=null;
});
})
更改并恢复“浅色背景元素”元素在mouseover和mouseleave骚乱期间的宽度和左侧，使滑动性能正常。
如果只有mouseover，在.style样式设置中，直接设置offsetWidth如下，不带单位。
nava_shadow.style.width=this.offsetWidth;
nava_shadow.style.left=shadowLeft;
可以实现鼠标离开后取消的效果，即css:hover的效果。
延长调整
您还可以根据需要为不同的菜单项位置和背景元素使用不同的颜色。
如果遵循不同的颜色，.animation 和 .animation-shadow 都必须指定不同的颜色变化。
nav a:nth-child(1).active ~ .animation{
background-color: rgb(250, 190, 250);
}
nav a:nth-child(1).active ~ .animation-shadow,
nav a:nth-child(1):hover ~ .animation-shadow{
background-color: rgba(250, 190, 250,.4);
}
nav a:nth-child(2).active ~ .animation{
background-color: rgb(2, 165, 133);
}
nav a:nth-child(2).active ~ .animation-shadow,
nav a:nth-child(2):hover ~ .animation-shadow{
background-color: rgba(2, 165, 133,.4);
}
nav a:nth-child(3).active ~ .animation{
background-color: rgb(141, 161, 248);
}
nav a:nth-child(3).active ~ .animation-shadow,
nav a:nth-child(3):hover ~ .animation-shadow{
background-color: rgba(141, 161, 248,.4);
}
nav a:nth-child(4).active ~ .animation{
background-color: rgb(255, 177, 177);
}
nav a:nth-child(4).active ~ .animation-shadow,
nav a:nth-child(4):hover ~ .animation-shadow{
background-color: rgba(255, 177, 177,.4);
}
nav a:nth-child(5).active ~ .animation{
background-color: rgb(201, 123, 246);
}
nav a:nth-child(5).active ~ .animation-shadow,
nav a:nth-child(5):hover ~ .animation-shadow{
background-color: rgba(201, 123, 246,.4);
}
参考
滑动按钮
