有趣的css - 滑块动效导航栏
<h1>整体效果</h1><p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/IjicfooSDeBpJHO9p4GX7BLia1oTbiavas6VicL76hO6aA8Rlo9JrdjReeBEngwMM6DPlQhswpDy2JIb4GwV04k91A/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<blockquote>
<p>💎知识点：<br />
1️⃣ <code><span leaf="">:hover</span></code> 和 <code><span leaf="">:checked</span></code> 选择器<br />
2️⃣ <code><span leaf="">transition</span></code> 过渡属性<br />
3️⃣ <code><span leaf="">input</span></code> 单选按钮</p>
</blockquote>
<blockquote>
<p>🔑思路：<br />
创建三个单选按钮并隐藏，然后绘制三个导航栏按钮，再利用单选按钮选中状态来移动底层的背景。</p>
</blockquote>
<p>三个 tab 项滑块导航菜单，适用于多种设备界面。</p>
<hr />
<hr />
<p>核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。</p>
<h1>核心代码</h1>
<h2>html 代码</h2>
<pre><code><nav class="nav93">
<input type="radio" name="radio93" id="radio93-1" checked="" />
<label for="radio93-1" class="nav-tab93">首页</label>
<input type="radio" name="radio93" id="radio93-2" />
<label for="radio93-2" class="nav-tab93">设计</label>
<input type="radio" name="radio93" id="radio93-3" />
<label for="radio93-3" class="nav-tab93">前端</label>
<span class="slide93"></span>
</nav>
</code></pre>
<blockquote>
<p>导航栏主体代码</p>
</blockquote>
<p><strong>注意：</strong> 这里的 <code><span leaf="">input</span></code> 单选按钮以及 <code><span leaf="">label</span></code> 标签，按序写下来，这样才能在css中利用 <code><span leaf="">:checked</span></code> 选择器来改变成需要的样式效果。</p>
<h2>css 部分代码</h2>
<pre><code>.nav93{
height: 32px;
padding: 12px;
position: relative;
overflow: hidden;
display: flex;
background-color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
border-radius: 28px;
}
.nav93 input{
display: none;
}
.nav-tab93{
width: 68px;
height: 32px;
line-height: 32px;
border-radius: 16px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #3d3d3d;
background-color: transparent;
transition: all 0.3s linear;
cursor: pointer;
z-index: 2;
}
.nav-tab93:hover{
transform: translateY(-1px);
}
.nav93 input:checked + .nav-tab93{
color: #45873c;
}
.slide93{
width: 68px;
height: 32px;
line-height: 32px;
border-radius: 16px;
background-color: rgba(0, 129, 12, 0.1);
position: absolute;
transition: all 0.3s linear;
}
#radio93-1:checked ~ .slide93{
transform: translateX(0);
}
#radio93-2:checked ~ .slide93{
transform: translateX(68px);
}
#radio93-3:checked ~ .slide93{
transform: translateX(136px);
}
</code></pre>
<blockquote>
<p>1、绘制出三个 <code><span leaf="">tab</span></code> 项以及三个单选按钮，并且隐藏掉单选按钮 <code><span leaf="">display: none;</span></code> ，然后导航栏外观的基本样式。</p>
</blockquote>
<blockquote>
<p>2、给 <code><span leaf="">label</span></code> 标签添加基本样式以及字体样式，添加透明背景，然后加上 <code><span leaf="">transition</span></code> 过渡属性，并且设置层级 <code><span leaf="">z-index</span></code> ，让其内容层级更高，在最上方。</p>
</blockquote>
<blockquote>
<p>3、利用 <code><span leaf="">:checked</span></code> 选择器，当某个按钮选中时，改变按钮同级的下一个元素的文字颜色。</p>
</blockquote>
<blockquote>
<p>4、再定义最后面的 <code><span leaf="">span</span></code> 标签，让其基本尺寸同 <code><span leaf="">label</span></code> 标签大小相同，定义 <code><span leaf="">span</span></code> 的背景颜色，并且加上 <code><span leaf="">transition</span></code> 过渡属性。</p>
</blockquote>
<blockquote>
<p>5、最后再利用 <code><span leaf="">:checked</span></code> 选择器，来判断当按钮选中时，根据选中的按钮来让 <code><span leaf="">span</span></code> 元素移动到对应的按钮下方。</p>
</blockquote>
<p><strong>注意</strong> <code><span leaf="">:checked + </span></code> 是表示选中按钮的下一个同级 <code><span leaf=""></span></code> 元素；<code><span leaf="">:checked ~ </span></code> 是表示选中按钮的后面同级的 <code><span leaf=""></span></code> 元素。</p>
<h1>完整代码如下</h1>
<h2>html 页面</h2>
<pre><code><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>滑块动效导航栏</title>
</head>
<body>
<div class="app">
<nav class="nav93">
<input type="radio" name="radio93" id="radio93-1" checked="" />
<label for="radio93-1" class="nav-tab93">首页</label>
<input type="radio" name="radio93" id="radio93-2" />
<label for="radio93-2" class="nav-tab93">设计</label>
<input type="radio" name="radio93" id="radio93-3" />
<label for="radio93-3" class="nav-tab93">前端</label>
<span class="slide93"></span>
</nav>
</div>
</body>
</html>
</code></pre>
<h2>css 样式</h2>
<pre><code>.app{
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.nav93{
height: 32px;
padding: 12px;
position: relative;
overflow: hidden;
display: flex;
background-color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
border-radius: 28px;
}
.nav93 input{
display: none;
}
.nav-tab93{
width: 68px;
height: 32px;
line-height: 32px;
border-radius: 16px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #3d3d3d;
background-color: transparent;
transition: all 0.3s linear;
cursor: pointer;
z-index: 2;
}
.nav-tab93:hover{
transform: translateY(-1px);
}
.nav93 input:checked + .nav-tab93{
color: #45873c;
}
.slide93{
width: 68px;
height: 32px;
line-height: 32px;
border-radius: 16px;
background-color: rgba(0, 129, 12, 0.1);
position: absolute;
transition: all 0.3s linear;
}
#radio93-1:checked ~ .slide93{
transform: translateX(0);
}
#radio93-2:checked ~ .slide93{
transform: translateX(68px);
}
#radio93-3:checked ~ .slide93{
transform: translateX(136px);
}
</code></pre>
<h2>页面渲染效果</h2>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/IjicfooSDeBpJHO9p4GX7BLia1oTbiavas6VicL76hO6aA8Rlo9JrdjReeBEngwMM6DPlQhswpDy2JIb4GwV04k91A/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。</p>
页:
[1]