• 日期: 2027-03-11
  • 标签: 常规

{"title":"CSS Tab 选中动画效果：背景色滑动过渡 - 示例教程","description":"使用CSS过渡和JavaScript实现Tab选项卡选中时的背景色滑动动画效果。示例代码展示了如何使用.active类控制选中状态，并通过CSS transition属性实现背景色的平滑过渡。","keywords":"css, tab, 动画, 选中, 过渡, transition, javascript, 背景色, 滑动, 示例, 教程","content":"<div class="tabs">\n <div class="tab">Tab 1

\n <div class="tab">Tab 2
\n <div class="tab">Tab 3
\n
\n\n\n\ncss\n.tabs {\n display: flex;\n}\n\n.tab {\n padding: 10px;\n background-color: white;\n transition: background-color 0.3s;\n}\n\n.tab.active {\n background-color: black;\n}\n\n\njavascript\nconst tabs = document.querySelectorAll('.tab');\n\ntabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n });\n});\n```\n\n在这个示例中，我们使用了一个.active类来表示当前选中的tab。当点击一个tab时，我们先移除所有tab的.active类，然后给当前点击的tab添加.active类。\n\n通过CSS的过渡属性，我们定义了背景色的变化效果，当.active类被添加时，背景色会在0.3秒内从白色过渡到黑色。这样就实现了选中的tab背景色滑动到当前选中的效果。"}

CSS Tab 选中动画效果：背景色滑动过渡 - 示例教程

原文地址: https://www.cveoy.top/t/topic/p0MF 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录