发布时间：2026-09-28 18:22:18 浏览次数：1
滑动门效果，是一种常用于网站菜单、标签等交互式组件的效果。在鼠标悬停或点击时，该组件的背景色会发生变化并滑动到目标位置。该效果可以使用户操作更加友好，增加用户体验。
CSS3提供了transition/transform属性，可以使元素在发生状态变化时产生平滑的动画效果，我们可以使用该属性实现滑动门效果。具体代码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>滑动门效果-CSS实现</title> <style> .menu { display: flex; justify-content: space-between; align-items: center; width: 300px; height: 50px; } .menu-item { padding: 10px; cursor: pointer; color: #333; font-size: 16px; transition: all .3s; } .menu-item:hover { color: #fff; background-color: #333; transform: translateX(10px); } </style></head><body> <p class="menu"> <p class="menu-item">菜单一</p> <p class="menu-item">菜单二</p> <p class="menu-item">菜单三</p> </p></body></html>JS提供了更加灵活的方式实现滑动门效果，代码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>滑动门效果-JS实现</title> <style> .menu { display: flex; justify-content: space-between; align-items: center; width: 300px; height: 50px; } .menu-item { padding: 10px; cursor: pointer; color: #333; font-size: 16px; } .menu-item-active { color: #fff; background-color: #333; position: relative; } .menu-item-active::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: red; transform: scaleX(0); transform-origin: left; transition: all .3s; } .menu-item-active:hover::after { transform: scaleX(1); } </style></head><body> <p class="menu"> <p class="menu-item menu-item-active">菜单一</p> <p class="menu-item">菜单二</p> <p class="menu-item">菜单三</p> </p> <script> // 获取菜单项元素 const menuItems = document.querySelectorAll('.menu-item'); // 循环绑定事件 menuItems.forEach((menuItem) => { menuItem.addEventListener('mouSEOver', () => { // 移除所有菜单项的active类 menuItems.forEach((item) => { item.classList.remove('menu-item-active'); }); // 为当前菜单项添加active类 menuItem.classList.add('menu-item-active'); }); }); </script></body></html>免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流