前言：
目前我们对“css鼠标滑动效果”大体比较重视，咱们都需要分析一些“css鼠标滑动效果”的相关知识。那么小编也在网络上网罗了一些关于“css鼠标滑动效果””的相关资讯，希望小伙伴们能喜欢，你们一起来学习一下吧！本文使用html、css、javascript实现一个水平滑动选择框，实际效果见下图，水平方向的三个选项可以实现动态的滑动选择，当你理解了其中的实现方式后，你就可以实现自己的版本，滑动选项的多少可以自由定义，不是必须三个。
实现思路
整个的实现主要使用CSS，只需要一点点JavaScript代码，用来响应用户的鼠标点击事件。
首先，使用使用css flex布局实现一个水平排列选项列表，共包含三个选项，flex-container的justify-content设置为space-around使每个选项呈现在各自选项中居中的效果。另外设置flex-container宽度为24px，那么每个选项的宽度就是8px，还要设置flex-container的position为相对定位，这两个设置的作用在下面进行说明。
接下来，在flex-container内再添加一个flex-item，该flex-item的position属性设置为绝对定位，宽度为flex-container为33.33%，也就是8px，是一个选项的宽度，背景色为白色，将它叠加到某个选项上面实现选中的效果。为了实现选项切换的动画效果，使用了css的transform和transition属性，transform用来设置水平方向的移动距离，移动距离为8px的倍数，这样看起来就是在选项之间切换，transition用来设置过度的快慢。
这里需要特别说明的是，当把某个元素设置为绝对定位时，它并不是相对于整个body进行定位的，而是相对于最近的父级相对定位元素来定位，这也是把flex-container设置为相对定位的原因。
最后，写一点JavaScript代码来处理鼠标响应事件，用户使用鼠标点击某个选项时，就会为某个选项添加选中的class名，css特性就会触发相应的动画，实现选中的效果。
代码
html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./slide.css"> <title>slidemenu</title></head><body> <h1>水平滑动选择框示例</h1> <div class="row"> <div class="menu left" id="slide-menu"> <div class="menu-item menu-item-left">选项A</div> <div class="menu-item menu-item-center">选项B</div> <div class="menu-item menu-item-right">选项C</div> <div class="menu-item-toggle-handle"></div> </div> </div> <script src="./slide.js"></script></body></html>
css：
body { padding: 0; margin: 0;}.row { background-color: #f76820;}.row { display: flex; justify-content: center; padding: 0.5rem 0;}.row .menu { display: flex; position: relative; height: 2.25rem; flex-wrap: nowrap; width: 24rem; justify-content: space-around; align-items: center; background: rgba(52,73,94,.4)!important; border: 3px solid rgba(52,73,94,.2); border-radius: .2rem;}.menu .menu-item { padding: 5px; font-family: Arial, Helvetica, sans-serif; color: white; cursor: pointer; z-index: 1;}.menu.left .menu-item-left, .menu.center .menu-item-center, .menu.right .menu-item-right { color: #f76820 !important;}.menu .menu-item-toggle-handle { width: 33.33%; height: 2.2rem; background-color: #fff; border-radius: 3px; position: absolute; left: 0; transform: translateX(0); transition: transform .3s;}.menu.center .menu-item-toggle-handle { transform: translateX(8rem);}.menu.right .menu-item-toggle-handle { transform: translateX(16rem);}JavaScript：
window.onload = function() { var menu_item_handle = function(event) { menu_item_class = event.target.className; if (menu_item_class.indexOf("menu-item-left") != -1) { // 选择left选项 menu.className = "menu left"; } else if (menu_item_class.indexOf("menu-item-center") != -1) { // 选择center选项 menu.className = "menu center"; } else if (menu_item_class.indexOf("menu-item-right") != -1) { // 选择right选项 menu.className = "menu right"; } }; var menu = document.getElementById('slide-menu'); var menu_item_left = document.getElementsByClassName('menu-item-left')[0]; var menu_item_center = document.getElementsByClassName('menu-item-center')[0]; var menu_item_right = document.getElementsByClassName('menu-item-right')[0]; menu_item_left.onclick = menu_item_handle; menu_item_center.onclick = menu_item_handle; menu_item_right.onclick = menu_item_handle; } 标签： #css鼠标滑动效果
