带有滑动菜单指示器的纯 CSS 导航选项卡

效果展示

在这里插入图片描述

CSS 知识点

  • filter 属性回顾

  • transition 属性回顾

  • 使用单选框实现导航菜单的思路

    单选框当点击完成后就会有一个:checked属性,可以利用这个属性来实现导航菜单底部滑动块的滑动动画和当前菜单项激活状态的管理。

整体页面结构

<div class="tabs">
  <!-- 单选 -->
  <input type="radio" id="home" name="tabsMenu" />
  <input type="radio" id="profile" name="tabsMenu" />
  <input type="radio" id="likes" name="tabsMenu" />
  <input type="radio" id="settings" name="tabsMenu" />
  <input type="radio" id="notifications" name="tabsMenu" />

  <!-- 图标 -->
  <div class="buttons">
    <label for="home">
      <i class="fa-solid fa-house"></i>
    </label>
    <label for="profile">
      <i class="fa-solid fa-user"></i>
    </label>
    <label for="likes">
      <i class="fa-solid fa-heart"></i>
    </label>
    <label for="settings">
      <i class="fa-sharp fa-solid fa-gear"></i>
    </label>
    <label for="notifications">
      <i class="fa-solid fa-bell"></i>
    </label>
    <!-- 滑块 -->
    <div class="underline"></div>
  </div>
</div>

实现整体布局

.tabs input {
  visibility: hidden;
  display: none;
}

.buttons {
  position: relative;
  display: flex;
  gap: 80px;
  padding: 30px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: #182d3c;
  overflow: hidden;
  border-radius: 20px;
}

编写菜单图标激活后的样式

.buttons label {
  width: 20%;
  font-size: 1.75em;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  cursor: pointer;
  transition: 0.5s;
}

.buttons label:hover {
  opacity: 1;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
}

/* 通过单选框激活状态,设置图标的激活状态 */
.tabs input:nth-child(1):checked ~ .buttons label:nth-child(1),
.tabs input:nth-child(2):checked ~ .buttons label:nth-child(2),
.tabs input:nth-child(3):checked ~ .buttons label:nth-child(3),
.tabs input:nth-child(4):checked ~ .buttons label:nth-child(4),
.tabs input:nth-child(5):checked ~ .buttons label:nth-child(5) {
  color: #fff;
  opacity: 1;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
}

实现菜单底部块的样式和移动样式

.underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20%;
  height: 5px;
  /* 设置滑块的移动时间 */
  transition: 0.5s;
}

.underline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 100%;
  background: #fff;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(
      0 0 30px #fff
    ) drop-shadow(0 0 50px #fff);
}

.underline::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 100%;
  background: #fff;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(
      0 0 30px #fff
    ) drop-shadow(0 0 50px #fff) blur(5px);
}

/* 通过单选框激活状态,设置滑块的移动距离 */
.tabs input:nth-child(1):checked ~ .buttons .underline {
  left: 0;
}

.tabs input:nth-child(2):checked ~ .buttons .underline {
  left: 20%;
}

.tabs input:nth-child(3):checked ~ .buttons .underline {
  left: 40%;
}

.tabs input:nth-child(4):checked ~ .buttons .underline {
  left: 60%;
}

.tabs input:nth-child(5):checked ~ .buttons .underline {
  left: 80%;
}

完整代码下载

完整代码下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/124344.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ZZ308 物联网应用与服务赛题第F套

2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 &#xff08;F卷&#xff09; 赛位号&#xff1a;______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等&#xff1b; 2.竞赛任务中所使用…

【Royalty in Wind 2.0.0】个人体测计算、资料分享小程序

前言 Royalty in Wind 是我个人制作的一个工具类小程序。主要涵盖体测计算器、个人学习资料分享等功能。这个小程序在2022年第一次发布&#xff0c;不过后来因为一些原因暂时搁置。现在准备作为我个人的小程序重新投入使用XD PS&#xff1a;小程序开发部分我是在21年跟随郄培…

配置Linux为无线路由器

配置Linux无线路由器 将Linux配置为无线路由器。使用hostapd&#xff0c;可以配置无线网卡为AP模式。 这里使用buildroot来生成这个工具。Wi-Fi模块使用的是 rt8188eus。 1. 内核配置 2. buildroot配置 开启 rt8188eus 驱动 3. 启动hostapd 系统启动后&#xff0c;会自动加…

innovus:set_ccopt_property基本用法备忘录(中)

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 insertion_delay insertion delay的作用是指导clock tree做长或做短。具体可以看以下文章:innovus set_ccopt_property insertion_delay insertion_delay的设置的来源有三个…

detectron2环境搭建及自定义coco数据集(voc转coco)训练

detectron2建议ubuntu进行环境搭建&#xff0c;Windows大概率报错 一 环境搭建 创建虚拟环境 conda create -n detectron2 python3.8 -y conda activate detectron2后面下载源代码建议存到git中再git clone git clone https://github.com/facebookresearch/detectron2.git …

Linux搭建我的世界MC服务器 【Minecraft外网联机教程】

文章目录 前言1. 安装JAVA2. MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7. 配置公网访问地址8.远程联机测试9. 配置固定远程联机端口地址9.1 保留一个固定tcp地址9.2 配置固定公网TCP地址9.3 使用固定公网地址远程联机 前言 Li…

蓝桥杯国一,非ACMer选手保姆级经验分享

目录 一、前言二、蓝桥杯简介三、0基础计算机新手小白&#xff0c;赛前如何准备提高自己的获奖率&#xff1f;3.1 每两周参加一次【蓝桥算法双周赛】3.2 多练真题3.3 参加每一场官方校内模拟赛 四、结语 一、前言 hello&#xff0c;大家好&#xff0c;我是大赛哥(弟)&#xff…

竞赛 目标检测-行人车辆检测流量计数

文章目录 前言1\. 目标检测概况1.1 什么是目标检测&#xff1f;1.2 发展阶段 2\. 行人检测2.1 行人检测简介2.2 行人检测技术难点2.3 行人检测实现效果2.4 关键代码-训练过程 最后 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 行人车辆目标检测计数系统 …

html实现竖直步骤条

1、问题描述 最近碰到一个需求&#xff0c;要把审批流程改为竖直步骤条的形式。本来想直接抄网上的&#xff0c;但是网上给的要么是水平步骤条&#xff0c;要么是集成在框架里的&#xff0c;要么就是人家写的太复杂了&#xff0c;js&#xff0c;css一大堆。 2、我的代码 代码下…

技术分享 | app自动化测试(Android)-- 特殊控件 Toast 识别

Toast 是 Android 系统中的一种消息框类型&#xff0c;它属于一种轻量级的消息提示&#xff0c;常常以小弹框的形式出现&#xff0c;一般出现 1 到 2 秒会自动消失&#xff0c;可以出现在屏幕上中下任意位置。它不同于 Dialog&#xff0c;它没有焦点。Toast 的设计思想是尽可能…

效率提升75%!要做矩阵号,更要做好矩阵号管理

在如今的信息数字化时代&#xff0c;面对竞争日趋激烈的市场&#xff0c;数字化转型成为了企业提高效率和竞争力、实现可持续发展的重要手段。 这一两年来&#xff0c;我们也发现&#xff0c;越来越多的品牌企业开始探索数字化转型的实践&#xff0c;通过使用自建或者采买的数据…

【Linux网络】2分钟学习centos7永久修改网卡名称

目录 第一步&#xff0c;先查看网卡名称 第二步&#xff1a;先修改配置文件/etc/default/grub&#xff0c;添加net.ifnemes0 第三步&#xff1a;重新加载内核配置grub2-mkconfig -o /boot/grub2/grub.cfg 第四步&#xff1a;重启电脑 第五步&#xff1a;查看网卡名称&…

第三届 “鹏城杯”(初赛)

第三届 “鹏城杯”&#xff08;初赛&#xff09; WEB Web-web1 反序列化tostring打Hack类 Payload:O%3A1%3A%22H%22%3A1%3A%7Bs%3A8%3A%22username%22%3BO%3A6%3A%22Hacker%22%3A2%3A%7Bs%3A11%3A%22%00Hacker%00exp%22%3BN%3Bs%3A11%3A%22%00Hacker%00cmd%22%3BN%3B%7D%7D…

计算机丢失mfc140.dll是什么意思?附送修复教程

mfc140.dll是Microsoft Foundation Classes&#xff08;MFC&#xff09;库的一部分&#xff0c;是一种动态链接库&#xff08;DLL&#xff09;文件。MFC库是Microsoft提供的一种C编程框架&#xff0c;它为开发者提供了许多方便的工具和类&#xff0c;以简化Windows应用程序的开…

K8S知识点(七)

&#xff08;1&#xff09;实战入门-Namespace kubernets&#xff1a;系统创建的资源在这个命名空间里 &#xff0c;集群组件资源 kubrnets组件也是以pod的形式运行的 命令行方式操作 查看namespace和详情&#xff1a; 创建和查看和删除&#xff1a; 使用过配置文件操作&am…

云贝教育 |【PostgreSQL PGCA】pg15安装pg_hint_plan扩展包

pg15安装pg_hint_plan扩展包 pg当前是支持HINT固定执行计划&#xff0c;需要通过扩展包pg_hint_plan来实现 一、扩展包下载&#xff1a; Releases ossc-db/pg_hint_plan GitHub 二、选择v15版本 pg_hint_plan15 1.5.1 is released pg_hint_plan15 1.5.1 is released. This…

计算机网络第4章-通用转发和SDN

引子&#xff1a; 在前面&#xff0c;我们将基于目的地转发的特征总结为两个步骤&#xff1a; 查找目的IP地址&#xff08;匹配&#xff09;&#xff0c;然后将分组发送到有特定输出端口的交换结构&#xff08;“动作”&#xff09;。 但是这种转发特征会带来许多问题&#…

软件测试面试会问哪些问题?

软件测试面试&#xff0c;一般会被问到下面这九类问题。 1、基础问题 2、Linux命令 3、数据库 4、功能测试 5、Python基础 6、接口测试 7、自动化测试 8、性能测试 9、人事问题 接下来&#xff0c;以上9类问题&#xff0c;我都会分别结合2个案例&#xff0c;附上答案&#xff0…

【gltf-pipeline】安装gltf-pipeline 进行文件格式转换

问题 想使用gltf-pipeline进行gltf和glb格式转换。简单记录一下安装过程。 解决 1、安装Node.js Node.js下载路径&#xff1a;https://nodejs.org/en 建议默认设置安装。 添加系统环境变量&#xff1a; 测试安装是否成功&#xff1a; 在cmd.exe中运行&#xff1a; no…

self.register_buffer方法使用解析(pytorch)

self.register_buffer就是pytorch框架用来保存不更新参数的方法。 列子如下&#xff1a; self.register_buffer("position_emb", torch.randn((5, 3)))第一个参数position_emb传入一个字符串&#xff0c;表示这组参数的名字&#xff0c;第二个就是tensor形式的参数…