<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮切换动画</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
display: flex;
/* align-items: center; */
position: relative;
width: 300px;
height: 50px;
border-radius: 5px;
/* 圆角更小 */
overflow: hidden;
background-color: #EBEBEB;
/* 背景稍暗 */
/* padding: 5px; 内边距 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.button {
width: 65px;
margin: 5px;
display: block;
text-align: center;
height: calc(100% - 10px);
line-height: 40px;
border: none;
border-radius: 5px;
background-color: transparent;
cursor: pointer;
font-size: 14px;
color: #3B3B3B;
/* 默认字体颜色为白色 */
transition: background-color 0.3s, color 0.3s;
position: relative;
z-index: 2;
/* background-color: red; */
}
.button:hover {
background-color: rgba(255, 255, 255, 0.3);
/* 悬停背景 */
}
.indicator {
position: absolute;
/* padding: 5px; */
width: 65px;
height: calc(100% - 10px);
margin: 5px;
background-color: #fff;
/* 指示器颜色 */
transition: transform 0.3s ease-in-out;
z-index: 1;
border-radius: 10px;
/* 确保指示器在最下层 */
}
/* 为每个按钮添加对应的选中效果 */
.button.selected {
/* 选中时背景为白色 */
color: black;
/* 选中时字体为黑色 */
}
</style>
</head>
<body>
<div class="container">
<div class="indicator" id="indicator"></div>
<span class="button selected" onclick="moveIndicator(0)">按钮 1</span>
<span class="button" onclick="moveIndicator(1)">按钮 2</span>
<span class="button" onclick="moveIndicator(2)">按钮 3</span>
<span class="button" onclick="moveIndicator(3)">按钮 4</span>
</div>
<script>
function moveIndicator(index) {
const indicator = document.getElementById('indicator');
const buttons = document.querySelectorAll('.button');
const offset = index * 75; // 每个按钮的宽度为 75px
indicator.style.transform = `translateX(${offset}px)`;
// 更新按钮状态
buttons.forEach((button, i) => {
if (i === index) {
button.classList.add('selected'); // 添加选中样式
} else {
button.classList.remove('selected'); // 移除其他按钮的选中样式
}
});
}
</script>
</body>
</html>
