水平滚动导航的magicline动画是一种常见的网页导航效果,通过动态的线条跟随鼠标移动来突出当前选中的导航项。下面是制作水平滚动导航的magicline动画的步骤:
<div class="nav-container">
<ul>
<li id="nav-item1">导航项1</li>
<li id="nav-item2">导航项2</li>
<li id="nav-item3">导航项3</li>
<li id="nav-item4">导航项4</li>
</ul>
<div class="magic-line"></div>
</div>
.nav-container {
position: relative;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
padding: 10px;
cursor: pointer;
}
.magic-line {
position: absolute;
bottom: 0;
height: 2px;
background-color: #000;
transition: width 0.3s ease;
}
const navItems = document.querySelectorAll('.nav-container li');
const magicLine = document.querySelector('.magic-line');
function moveMagicLine() {
const currentItem = document.querySelector('.current');
const currentItemRect = currentItem.getBoundingClientRect();
const containerRect = document.querySelector('.nav-container').getBoundingClientRect();
const left = currentItemRect.left - containerRect.left;
const width = currentItemRect.width;
magicLine.style.width = `${width}px`;
magicLine.style.transform = `translateX(${left}px)`;
}
navItems.forEach(item => {
item.addEventListener('mouseover', () => {
item.classList.add('current');
moveMagicLine();
});
item.addEventListener('mouseout', () => {
item.classList.remove('current');
moveMagicLine();
});
});
通过以上步骤,就可以实现水平滚动导航的magicline动画效果。当鼠标悬停在导航项上时,magicline会跟随鼠标移动到当前选中的导航项,并且宽度与导航项相匹配。
注意:以上代码只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和优化。
推荐的腾讯云相关产品:在制作水平滚动导航的magicline动画过程中,腾讯云的云服务器(CVM)和云函数(SCF)可以提供稳定的计算资源和服务器less的执行环境。此外,腾讯云的对象存储(COS)可以用来存储网页所需的静态资源。具体产品介绍和链接如下:
领取专属 10元无门槛券
手把手带您无忧上云