CSS 之 Tab 选中滑动效果
在CSS中实现选中滑动效果，通常指的是在用户选中（如点击或悬停）某个元素时，该元素能够平滑地滑动或移动到另一个位置。这种效果可以通过CSS的transition属性来实现。
一、使用transition属性
transition属性允许你在CSS中定义过渡效果，即在某个属性变化时，如何平滑地从当前状态过渡到新状态。
二、滑动效果代码示例
假设我们有一个按钮，当用户点击它时，我们希望一个盒子从屏幕的一侧滑动到另一侧。
<html>
<head>
<script>
window.onload = function(){
var btn = document.getElementById('slideButton');
var target = document.querySelector('.slideBox');
btn.addEventListener('click', function() {
// 切换active类以触发过渡效果
target.classList.toggle('active');
});
}
</script>
<style>
.slideBox {
position: relative;
margin-top: 1rem;
width: 100px;
height: 100px;
background-color: #4CAF50;
left: 0; /* 初始位置 */
transition: left 0.5s ease; /* 定义过渡效果 */
}
/* 未点击状态 */
.slideBox:not(.active) {
left: 0; /* 初始位置 */
}
/* 点击后的状态 */
.slideBox.active {
left: 200px; /* 移动到的位置 */
}
</style>
</head>
<body>
<button id="slideButton">点击滑动</button>
<div class="slideBox"></div>
</body>
</html>
标签:
CSS
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架