HTML+CSS:导航栏组件

效果演示

38-导航栏组件.gif

实现了一个导航栏的动画效果,当用户点击导航栏中的某个选项时,对应的选项卡会向左平移,同时一个小圆圈会出现在选项卡的中心,表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。

Code

<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4144272_3vtq4renm6e.css"><ul class="nav"><li class="active"><i class="iconfont icon-home"></i><span>Home</span></li><li><i class="iconfont icon-envelope"></i><span>Email</span></li><li><i class="iconfont icon-comment"></i><span>Message</span></li><li><i class="iconfont icon-heart"></i><span>Like</span></li><li><i class="iconfont icon-user"></i><span>Profile</span></li><div class="indicator"></div>
</ul>
* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #e8e8e8;
}.nav {width: 400px;height: 70px;padding: 0 25px;border-radius: 10px;background-color: #fff;position: relative;display: flex;
}.nav li {width: 70px;height: 70px;z-index: 1;position: relative;list-style: none;cursor: pointer;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.nav li i {position: relative;display: block;height: 70px;line-height: 70px;font-size: 24px;text-align: center;transition: all 0.5s;
}.nav li span {position: absolute;font-size: 12px;letter-spacing: 2px;transition: all .5s;opacity: 0;transform: translateY(20px);
}.nav li.active i {transform: translateY(-35px);color: #fff;
}.nav li.active span {opacity: 1;transform: translateY(10px);
}.indicator {position: absolute;top: -50%;width: 70px;height: 70px;background: #2196f3;border-radius: 50%;border: 6px solid #e8e8e8;transition: all .5s;
}.indicator::before {content: '';position: absolute;top: 50%;left: -22px;width: 20px;height: 20px;background-color: #fff;border-top-right-radius: 20px;box-shadow: 1px -10px 0 0 #e8e8e8;
}.indicator::after {content: '';position: absolute;top: 50%;right: -22px;width: 20px;height: 20px;background-color: #fff;border-top-left-radius: 20px;box-shadow: -1px -10px 0 0 #e8e8e8;
}li:nth-child(1).active~.indicator {transform: translateX(calc(70px * 0));
}li:nth-child(2).active~.indicator {transform: translateX(calc(70px * 1));
}li:nth-child(3).active~.indicator {transform: translateX(calc(70px * 2));
}li:nth-child(4).active~.indicator {transform: translateX(calc(70px * 3));
}li:nth-child(5).active~.indicator {transform: translateX(calc(70px * 4));
}

实现思路拆分

* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}

这段代码定义了全局样式,包括设置全局的字体、边距和盒模型等。

body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #e8e8e8;
}

这段代码定义了页面的基本样式,包括设置页面的高度、背景颜色、居中显示等。

.nav {width: 400px;height: 70px;padding: 0 25px;border-radius: 10px;background-color: #fff;position: relative;display: flex;
}

这段代码定义了导航栏的样式,包括设置导航栏的宽度、高度、内边距、圆角、背景颜色、定位和显示等。

.nav li {width: 70px;height: 70px;z-index: 1;position: relative;list-style: none;cursor: pointer;display: flex;flex-direction: column;justify-content: center;align-items: center;
}

这段代码定义了导航栏中的每个选项卡的样式,包括设置选项卡的宽度、高度、z-index、定位、列表样式、光标类型、显示方式、垂直居中和水平居中等。

.nav li i {position: relative;display: block;height: 70px;line-height: 70px;font-size: 24px;text-align: center;transition: all 0.5s;
}

这段代码定义了选项卡中的图标的样式,包括设置图标的定位、显示方式、高度、行高、字体大小、文本对齐方式和过渡效果等。

.nav li span {position: absolute;font-size: 12px;letter-spacing: 2px;transition: all.5s;opacity: 0;transform: translateY(20px);
}

这段代码定义了选项卡中的标题的样式,包括设置标题的定位、字体大小、字母间距、过渡效果、透明度和 translateY 动画效果等。

.nav li.active i {transform: translateY(-35px);color: #fff;
}

这段代码定义了选项卡被选中的样式,包括设置图标的 translateY 动画效果和颜色。

.nav li.active span {opacity: 1;transform: translateY(10px);
}

这段代码定义了选项卡被选中的标题的样式,包括设置标题的透明度和 translateY 动画效果。

.indicator {position: absolute;top: -50%;width: 70px;height: 70px;background: #2196f3;border-radius: 50%;border: 6px solid #e8e8e8;transition: all.5s;
}

这段代码定义了导航栏中的指示器的样式,包括设置指示器的定位、宽度、高度、背景颜色、圆角、边框和过渡效果等。

.indicator::before {content: '';position: absolute;top: 50%;left: -22px;width: 20px;height: 20px;background-color: #fff;border-top-right-radius: 20px;box-shadow: 1px -10px 0 0 #e8e8e8;
}

这段代码定义了指示器的前一个位置的样式,包括设置前一个位置的定位、宽度、高度、背景颜色、圆角和阴影等。

.indicator::after {content: '';position: absolute;top: 50%;right: -22px;width: 20px;height: 20px;background-color: #fff;border-top-left-radius: 20px;box-shadow: -1px -10px 0 0 #e8e8e8;
}

这段代码定义了指示器的后一个位置的样式,包括设置后一个位置的定位、宽度、高度、背景颜色、圆角和阴影等。

li:nth-child(1).active~.indicator {transform: translateX(calc(70px * 0));
}

这段代码定义了第一个选项卡被选中的样式,包括设置指示器的 translateX 动画效果,将其平移到第一个选项卡的位置。

li:nth-child(2).active~.indicator {transform: translateX(calc(70px * 1));
}

这段代码定义了第二个选项卡被选中的样式,包括设置指示器的 translateX 动画效果,将其平移到第二个选项卡的位置。

li:nth-child(3).active~.indicator {transform: translateX(calc(70px * 2));
}

这段代码定义了第三个选项卡被选中的样式,包括设置指示器的 translateX 动画效果,将其平移到第三个选项卡的位置。

li:nth-child(4).active~.indicator {transform: translateX(calc(70px * 3));
}

这段代码定义了第四个选项卡被选中的样式,包括设置指示器的 translateX 动画效果,将其平移到第四个选项卡的位置。

li:nth-child(5).active~.indicator {transform: translateX(calc(70px * 4));
}

这段代码定义了第五个选项卡被选中的样式,包括设置指示器的 translateX 动画效果,将其平移到第五个选项卡的位置。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于source批量处理sql命令建立数据库后发现中文乱码问题解决方案(Mysql)

今天在使用souce建表的时候发现自己表结构中的中文出现了乱码问题&#xff0c;那么具体的解决方案如下&#xff1a; 首先我们先使用命令行连接自己的数据库 mysql -u root -p 12345 然后使用show variables like "char%"; 如果说你的这个里面不是utf-8那么就是出现了…

第九篇【传奇开心果系列】Python的OpenCV技术点案例示例:目标跟踪

传奇开心果短博文系列 系列短博文目录Python的OpenCV技术点案例示例系列 短博文目录前言二、常用的目标跟踪功能、高级功能和增强跟踪技术介绍三、常用的目标跟踪功能示例代码四、OpenCV高级功能示例代码五、OpenCV跟踪目标增强技术示例代码六、归纳总结 系列短博文目录 Pytho…

maven--将jar包上传到maven中央仓库(公库)

原文网址&#xff1a;maven--将jar包上传到maven中央仓库(公库)-CSDN博客 简介 本文介绍怎样将jar包上传到maven中央仓库(公库)。 当自己有一些公共组件时&#xff0c;上传到maven公库是最好的&#xff0c;这样项目里直接引用即可&#xff0c;不需要在多处修改&#xff0c;而…

【Linux】基本指令(上)

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:Linux ⚙️操作环境:Xshell (操作系统:CentOS 7.9 64位) 目录 Xshell快捷键 Linux基本指令 ls指令 pwd指令 cd指令 touch指令 mkdir指令 rmdir指令/rm指令 结语 Xshell快捷键 AltEnter 全屏/取消全屏 Tab 进…

-1- Python环境安装

1、Python安装 1.1、Windows安装Python 进入python官网&#xff1a;Welcome to Python.org点击 download——>all releases&#xff1b;建议选择3.7.2版本&#xff08;网页链接&#xff1a;Python Release Python 3.7.2 | Python.org&#xff09;&#xff1b;下拉&#xf…

理想架构的高回退Doherty功率放大器理论与ADS仿真-Multistage

理想架构的高回退Doherty功率放大器理论与仿真-Multistage 参考&#xff1a; 三路Doherty设计 01 射频基础知识–基础概念 Switchmode RF and Microwave Power Amplifiers、 理想架构的Doherty功率放大器&#xff08;等分经典款&#xff09;的理论与ADS电流源仿真参考&#x…

go语言socket编程

1.互联网分层模型 过程分析&#xff1a; 2.Socket图解 Socket是应用层与TCP/IP协议族通信的中间软件抽象层。在设计模式中&#xff0c;Socket其实就是一个门面模式&#xff0c;它把复杂的TCP/IP协议族隐藏在Socket后面&#xff0c;对用户来说只需要调用Socket规定的相关函数&a…

备战蓝桥杯---数据结构与STL应用(优先队列的小细节)

很显然&#xff0c;我们先二分求X,对于验证&#xff0c;一开始我先想的是直接求每个的不足电量再除充电量后向上取整&#xff0c;然后判断与k的大小关系。事实上&#xff0c;如果让k很大&#xff0c;若有两只手机在下一刻多没电&#xff0c;显然上述方法得出的结论是错误的&…

氢气泄漏检测仪使用方法:守护安全,从细节开始

随着科技的发展&#xff0c;我们的生活和工作环境中充满了各种潜在的危险。其中&#xff0c;氢气作为一种清洁能源&#xff0c;其使用日益广泛&#xff0c;但同时也带来了泄漏的风险。为了确保我们的安全&#xff0c;了解并正确使用氢气泄漏检测仪至关重要。下面将详细介绍氢气…

机器学习:梯度下降法(Python)

LinearRegression_GD.py import numpy as np import matplotlib.pyplot as pltclass LinearRegression_GradDesc:"""线性回归&#xff0c;梯度下降法求解模型系数1、数据的预处理&#xff1a;是否训练偏置项fit_intercept&#xff08;默认True&#xff09;&…

了解 Redis Channel:消息传递机制、发布与订阅,以及打造简易聊天室的实战应用。

文章目录 1. Redis Channel 是什么2. Redis-Cli 中演示使用3. 利用 Channel 打造一个简易的聊天室参考文献 1. Redis Channel 是什么 Redis Channel 是一种消息传递机制&#xff0c;允许发布者向特定频道发布消息&#xff0c;而订阅者则通过订阅频道实时接收消息。 Redis Cha…

BioTech - 小分子药物生成与从头设计 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/135930139 小分子药物生成是一种利用计算方法自动探索化学空间&#xff0c;寻找具有理想生物活性和药物特性的分子结构的过程。从头设计是一种特殊…

【日常总结】windows11 设置文件默认打开方式

一、场景 二、实战 Stage 1&#xff1a;打开设置 Stage 2&#xff1a;应用 > 默认应用 > 搜索 .txt Stage 3&#xff1a;修改成notepad &#xff0c;设置默认值即可 一、场景 windows 11 .txt 默认记事本打开 需求&#xff1a;如何使用notepad打开呢 &#xff1f;…

隧道穿越:隧道穿透技术介绍

后面会进行一些隧道穿越的实验&#xff0c;因此在本篇中这里先介绍一些有关隧道穿越的技术知识点 隧道和隧道穿透 隧道是一种通过互联网基础设施在网络之间传递数据的方式&#xff0c;设计从数据封装、传输到解包的全过程&#xff0c;使用隧道传递的数据&#xff08;或者负载…

abap_bool 类型

abap_bool 类型 abap_bool 有两种abap_true和abap_false&#xff0c;abap_true代表x&#xff0c;abap_false是空

【Emgu CV教程】6.7、图像平滑之MedianBlur()中值滤波

文章目录 一、介绍1.原理2.函数介绍 二、举例1.原始素材2.代码3.运行结果 一、介绍 1.原理 图像的滤波分为线性滤波和非线性滤波,常见的线性滤波就是前面介绍的均值滤波、方框滤波、高斯滤波。常见的非线性滤波主要包括中值滤波、双边滤波&#xff0c;今天就先介绍中值滤波。…

二进制安全虚拟机Protostar靶场(5)堆的简单介绍以及实战 heap0

前言 这是一个系列文章&#xff0c;之前已经介绍过一些二进制安全的基础知识&#xff0c;这里就不过多重复提及&#xff0c;不熟悉的同学可以去看看我之前写的文章 什么是堆 堆是动态内存分配的区域&#xff0c;程序在运行时用来分配内存。它与栈不同&#xff0c;栈用于静态…

asdf安装不同版本的nodejs和yarn和pnpm

安装asdf 安装nodejs nodejs版本 目前项目中常用的是14、16和18 安装插件 asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git asdf plugin-add yarn https://github.com/twuni/asdf-yarn.git可以查看获取所有的nodejs版本 asdf list all nodejs有很多找…

【TCP】三次握手(建立连接)

前言 在网络通信的世界里&#xff0c;可靠传输协议&#xff08;TCP&#xff09;扮演着重要的角色&#xff0c;它保证了数据包能够按顺序、完整地从发送端传送到接收端。TCP协议中有一个至关重要的机制——三次握手。这一过程确保了两个TCP设备在开始数据传输之前建立起一个稳定…