简约时尚的纯CSS3 Tabs选项卡特效-css教程-PHP中文网

首页

web前端

css教程

简约时尚的纯CSS3 Tabs选项卡特效

黄舟

Mar 24, 2017 pm 01:43 PM

简要教程

这是一款使用纯CSS3制作的Tabs选项卡特效。该Tabs选项卡简约时尚，各个选项卡之间切换时使用了下划线跟随动画，整体效果非常不错。

HTML结构

整个Tabs选项卡的HTML结构分为几个部分：使用元素和一个无序列表来制作导航。

<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">  
<input type="radio" id="tab4" name="tab-control">
<ul>
  <li title="tab 1"><label for="tab1" role="button"><span>Tab 1</span></label></li>
  <li title="tab 2"><label for="tab2" role="button"><span>Tab 2</span></label></li>
  <li title="tab 3"><label for="tab3" role="button"><span>Tab 3</span></label></li>
  <li title="tab 4"><label for="tab4" role="button"><span>Tab 4</span></label></li>
</ul>

登录后复制

各个选项卡的内容包含在一个

元素中。

<p class="content">
  <section>
    <h2>Tab 1 content</h2>
  </section>
  <section>
    <h2>Tab 2 content</h2>
  </section>
  <section>
    <h2>Tab 3 content</h2>
  </section>
  <section>
    <h2>Tab 4 content</h2>
  </section>
</p>

登录后复制

用于制作下划线动画的线条使用一个

元素来制作。

<p class="slider"><p class="indicator"></p></p>

登录后复制

CSS样式

该Tabs选项卡的主要CSS样式如下：

.tabs {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: relative;
  background: white;
  padding: 50px;
  padding-bottom: 80px;
  width: 70%;
  height: 250px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  border-radius: 5px;
  min-width: 240px;
}
 
.tabs input[name="tab-control"] { display: none; }
 
.tabs .content section h2, .tabs ul li label {
  font-weight: bold;
  font-size: 18px;
  color: #428BFF;
}
 
.tabs ul {
  list-style-type: none;
  padding-left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-bottom: 10px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
 
.tabs ul li {
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 25%;
  padding: 0 10px;
  text-align: center;
}
 
.tabs ul li label {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #929daf;
  padding: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
.tabs ul li label br { display: none; }
 
.tabs ul li label svg {
  fill: #929daf;
  height: 1.2em;
  vertical-align: bottom;
  margin-right: 0.2em;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
  outline: 0;
  color: #bec5cf;
}
 
.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #bec5cf; }
 
.tabs .slider {
  position: relative;
  width: 25%;
  -webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
 
.tabs .slider .indicator {
  position: relative;
  width: 50px;
  max-width: 100%;
  margin: 0 auto;
  height: 4px;
  background: #428BFF;
  border-radius: 1px;
}
 
.tabs .content { margin-top: 30px; }
 
.tabs .content section {
  display: none;
  -webkit-animation-name: content;
  animation-name: content;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  line-height: 1.4;
}
 
.tabs .content section h2 {
  color: #428BFF;
  display: none;
}
 
.tabs .content section h2::after {
  content: "";
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background: #428BFF;
  margin-top: 5px;
  left: 1px;
}
 
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
  cursor: default;
  color: #428BFF;
}
 
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg { fill: #428BFF; }
@media (max-width: 600px) {
 
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { background: rgba(0, 0, 0, 0.08); }
}
 
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
 
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; }
 
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
  cursor: default;
  color: #428BFF;
}
 
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg { fill: #428BFF; }
@media (max-width: 600px) {
 
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { background: rgba(0, 0, 0, 0.08); }
}
 
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
 
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; }
 
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
  cursor: default;
  color: #428BFF;
}
 
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg { fill: #428BFF; }
@media (max-width: 600px) {
 
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { background: rgba(0, 0, 0, 0.08); }
}
 
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
  -webkit-transform: translateX(200%);
  transform: translateX(200%);
}
 
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; }
 
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
  cursor: default;
  color: #428BFF;
}
 
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg { fill: #428BFF; }
@media (max-width: 600px) {
 
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { background: rgba(0, 0, 0, 0.08); }
}
 
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
  -webkit-transform: translateX(300%);
  transform: translateX(300%);
}
 
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { display: block; }
@-webkit-keyframes 
content {  from {
 opacity: 0;
 -webkit-transform: translateY(5%);
 transform: translateY(5%);
}
 
to {
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}
}
@keyframes 
content {  from {
 opacity: 0;
 -webkit-transform: translateY(5%);
 transform: translateY(5%);
}
 
to {
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}
}
@media (max-width: 1000px) {
 
.tabs ul li label { white-space: initial; }
 
.tabs ul li label br { display: initial; }
 
.tabs ul li label svg { height: 1.5em; }
}
@media (max-width: 600px) {
 
.tabs ul li label {
  padding: 5px;
  border-radius: 5px;
}
 
.tabs ul li label span { display: none; }
 
.tabs .slider { display: none; }
 
.tabs .content { margin-top: 20px; }
 
.tabs .content section h2 { display: block; }

登录后复制

以上就是简约时尚的纯CSS3 Tabs选项卡特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

微信小程序：如何实现tabs选项卡效果示例

微信小程序 tabs选项卡效果的实现

javascript实现tabs选项卡切换效果

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7694

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

修复：Google Chrome 中的 ERR_ADDRESS_UNREACHABLE 错误 May 15, 2023 pm 06:22 PM

几位windows用户抱怨，当他们尝试在系统上的googlechrome浏览器上访问一些网站时，他们无法访问网页。它还在浏览器上显示一条消息，显示“无法访问该站点”，错误代码为ERR_ADDRESS_UNREACHABLE。此问题背后可能有许多潜在原因，可能是由于网站服务器问题、代理服务器设置、互联网连接不稳定等。如果您也遇到类似的问题，请不要惊慌。在深入分析了这篇文章中的问题后，我们得到了一堆解决方案。在继续之前，请尝试以下解决方法：尝试检查用户是否尝试从其他设备访问该网站并且没有问题，那么这

如何修复预览窗格在 Windows 11 中不起作用 Apr 24, 2023 pm 06:46 PM

Windows文件资源管理器附带的功能之一是预览窗格，它显示您选择的文件的预览。这意味着您可以在打开文件之前查看文件的内容。文件资源管理器的预览窗格为Office相关文档、PDF、文本文件、图像和视频等不同类型的文件提供预览。它通常可以正常工作，但有时文件预览不可用。最近，许多Windows11用户提出了文件资源管理器的预览窗格不工作并且他们无法查看文件预览的问题。您是否面临预览窗格无法在Windows计算机上运行的问题？然后，继续阅读这篇文章。在这里，我们编制了可以帮助您修复PC上的

在 Windows 11 中无法使用 MSI Afterburner？试试以下修复方法。 May 09, 2023 am 09:16 AM

MSIAfterburner是一款适用于大多数显卡的超频工具。除此之外，您还可以使用它来监控系统的性能。但是一些用户报告说MSIAfterburner无法在Windows11中运行。这可能是由于几个原因，我们在以下部分中讨论了它们。但是，当出现这种情况时，它会阻止您在玩游戏时更改性能或监控它。正如预期的那样，这对游戏玩家构成了重大挑战。这就是为什么我们专门使用本教程来帮助您了解该问题，并引导您完成针对MSIAfterburned在Windows11中无法运行的问题的最有效修复。

修复：在 Windows 11 上运行 Valorant 时出现 VAN 1067 错误 May 22, 2023 pm 02:41 PM

该操作系统看起来比其前身要好得多，并具有AutoHDR和DirectStorage等面向游戏玩家的功能，但Valorant玩家在启动游戏时遇到了一些麻烦。这不是早先游戏玩家面临的第一个问题，Valorant无法在Windows11上打开是困扰他们的另一个问题，但我们已经介绍了修复它的方法。现在看来，切换到Windows11的Valorant玩家由于安全启动和TPM2.0服务而面临问题，这导致游戏菜单在运行时仅显示退出选项。很多用户都收到VAN1067错误，但这不应该引起警

如何在 Opera 浏览器中禁用视频自动播放功能？ Apr 22, 2023 pm 10:43 PM

Opera浏览器的最新版本中包含新的自动视频弹出功能。使用此功能，您会注意到当您导航到浏览器中的另一个选项卡时，视频会自动弹出。已经注意到这个弹出视频可以调整大小并在屏幕上移动。当您导航回视频选项卡时，它会恢复并且浮动窗口会消失。视频弹出功能对于喜欢在工作时观看视频的多任务用户非常有用。但是，并不是每个Opera用户都会喜欢这个自动视频弹出功能。如果您是这样的Opera浏览器用户，每次更改标签时都对弹出的视频感到恼火，那么您就找到了正确的帖子。在这里，我们详细介绍了如何在Opera中禁用此弹

DirectX 函数 GetDeviceRemovedReason 失败并出现错误 May 17, 2023 pm 03:38 PM

我们玩的几乎所有高端游戏都依赖DirectX来有效运行。但是，一些用户报告遇到DirectX函数GetDeviceRemovedReasonfailedwith，然后是错误原因。对于普通用户而言，上述原因并非不言自明，需要进行一定程度的研究才能确定根本原因以及最有效的解决方法。为了使事情变得更容易，我们将本教程专门用于此问题。在以下部分中，我们将帮助您确定潜在原因并引导您完成故障排除步骤，以消除DirectX函数GetDeviceRemovedReasonfailedwitherror。什么导致

要修复此操作，需要使用交互式窗口站 Apr 24, 2023 pm 11:52 PM

此操作需要交互式窗口站是一个相当奇怪的错误。允许用户与应用交互的软件窗口未打开，您需要启用它们。此错误已与2021年的打印噩梦漏洞有关。但是，它一直持续到今天，影响您的计算机和设备的驱动程序。幸运的是，它很容易修复。为什么首先会发生此错误？在介绍如何修复此错误之前，请务必列出导致此错误的原因。这样，您可以采取必要的步骤来确保它不会再次发生。损坏的文件正在弄乱您的计算机文件–损坏可能是由多种原因引起的，从恶意软件到断电。建议您运行SFC扫描。您有一个过分热心的防病毒应用程序–防病毒软件有时会阻止

如何优化在Windows 11中的互联网连接速度 Apr 23, 2023 pm 10:46 PM

如何解决Windows11中网速慢的问题？1.重启电脑导航到桌面并按Alt+F4启动“关闭Windows”框。单击下拉菜单，然后从选项列表中选择重新启动。接下来，点击OK。对于您在Windows11中遇到的大多数问题，最有效的解决方案之一就是简单地重新启动计算机。如果它是导致问题的后台进程或错误，则重新启动操作系统将消除它，从而修复错误。电脑重启后，检查Windows11的网速问题是否解决。2.确保PC在路由器范围内（Wi-Fi网络）在无线网络的情况下，设备离路由器越远，互联网速度就越慢

See all articles

简约时尚的纯CSS3 Tabs选项卡特效

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题