<!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; // 每个按钮的宽度为 75pxindicator.style.transform = `translateX(${offset}px)`;// 更新按钮状态buttons.forEach((button, i) => {if (i === index) {button.classList.add('selected'); // 添加选中样式} else {button.classList.remove('selected'); // 移除其他按钮的选中样式}});}</script></body></html>
: relocation报错解决)
