前端小案例——动态导航栏文字（HTML + CSS, 附源码）
一、前言
实现功能:
这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景，并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素，包含一个文本和一个横向的下划线。
当鼠标悬停在选项上时，选项的文本颜色会变为粉红色，并且下划线会从中间向两边展开，呈现出一种动态的效果。
这种导航栏可以用于网页或应用程序中，提供简洁且有吸引力的导航选项。
实现逻辑：
- 创建一个导航栏容器div，并设置其类名设置为.nav。
- 在导航栏容器中创建四个选项，即li元素，每个选项包含一个文本和一个下划线。
- 为每个选项设置样式，包括设置宽度、高度、文本对齐方式、行高和相对定位。
- 为每个选项的下划线i元素设置样式，包括设置宽度为0%（初始状态下不可见）、高度为3px、背景色、绝对定位和过渡效果。
- 当鼠标悬停在选项上时，为选项设置:hover伪类样式，改变文本颜色为粉红色。
- 当鼠标悬停在选项上时，为选项下划线i元素设置:hover伪类样式，将下划线从中间向两边展开，即将left属性设置为0，将宽度设置为100%。
- 设置过渡效果，使下划线的展开效果具有动画效果。
二、项目运行效果
三、全部代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态导航栏文字</title><style>*{padding: 0;margin: 0;list-style: none;}.nav{display: flex;width: 500px;height: 100px;margin: 100px auto;justify-content: space-around;align-items: center;background-color: rgb(205, 223, 248);border-radius: 10px;}.nav li{position: relative;width: 100px;height: 50px;text-align: center;line-height: 50px;transition:.5s all;cursor: pointer;}.nav li i{display:block; width: 0%;height: 3px;background-color: rgb(255, 0, 119);position: absolute;bottom: 0px;left: 50%;transition:.5s all;}.nav li:hover {color: rgb(255, 0, 119);letter-spacing: 4px;}.nav :hover i{left:0; width:100%;}</style>
</head>
<body><div class="nav"><li>1111<i></i></li><li>2222<i></i></li><li>3333<i></i></li><li>4444<i></i></li></div>
</body>
</html>四、答疑解惑
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。
还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。
博主QQ：1196094293
谢谢各位的支持~~
相关文章：
前端小案例——动态导航栏文字（HTML + CSS, 附源码）
一、前言 实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景，并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素，包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时，选项的文本颜色…...
前置机、堡垒机（跳板机）【2024-02-04】
文章目录 0、前言1、前置机1.1、概念1.2、功能1.3、使用场景1.4、总结 2、堡垒机2.1、概念2.2、功能2.3、使用场景2.4、总结 3、前置机和堡垒机3.1、设计理念与目的3.2、功能3.3、使用场景 0、前言 文章借鉴： https://blog.csdn.net/weixin_45565886/article/detai…...
从编程中理解：大脑的短期记忆和长期记忆
在编程中，我们可以将大脑的短期记忆和长期记忆类比为程序中的变量作用域和持久化存储。在Unity C#编程环境下，可以这样解释： 假设金庸武侠世界中的人物张无忌正在修炼九阳真经。我们用C#代码来模拟他学习武功的过程，其中涉及的“…...
Rust 本地文档的使用：rustup doc
Rust 是一种系统级编程语言，以其安全性、速度和内存控制能力而闻名。为了方便开发者更好地了解并利用 Rust 标准库和工具链中的功能，Rust 提供了一种内置的文档浏览方式——通过 rustup doc 命令。 安装 rustup 在查阅 Rust 文档之前，确保你…...
uni-app切换页面刷新，返回上一页刷新（onShow钩子函数的使用）
切换页面刷新：通过onShow()便可实现 返回上一页通过uni.navigateBack({delta: 1});实现 以返回上一页刷新为例 从B页面返回上一页到A页面，在A页面写入方法refreshHandler() //a.vue methods: { // 执行刷新逻辑refreshHandler() {uni.request({ur…...
adb 无线连接 操作Android设备
最近集五福活动比较热门 可以用这个工具 用自己擅长的语言写一个循环程序 运行起来就可以 自动帮我们 看视频得福卡了 很方便 while (true) {sleep(mt_rand(15, 25));system(adb shell input swipe 500 2000 500 1000 100); } 1. 首先下载 安卓开发工具 adb adb网盘链接 链接…...
春节运维不打烊：一体化运维高效保障企业IT与机房环境
随着技术的不断发展和企业数字化转型的深入，IT运维已经成为企业运营不可或缺的一部分。尤其在春节期间，一体化运维管理系统以其独特的技术特性和卓越的功能，为企业的稳定运行提供了坚实保障，确保了节日的祥和与工作的连续高效。 一…...
类银河恶魔城学习记录1-5 CollisionCheck源代码 P32
Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释，可供学习Alex教程的人参考 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; u…...
spring boot 使用 Kafka
一、Kafka作为消息队列的好处 高吞吐量：Kafka能够处理大规模的数据流，并支持高吞吐量的消息传输。 持久性：Kafka将消息持久化到磁盘上，保证了消息不会因为系统故障而丢失。 分布式：Kafka是一个分布式系统，…...
LFU缓存（Leetcode460）
例题： 分析： 这道题可以用两个哈希表来实现，一个hash表（kvMap）用来存储节点，另一个hash表（freqMap）用来存储双向链表，链表的头节点代表最近使用的元素，离头节…...
Vue学习笔记：计算属性
计算属性 入门进阶二次进阶三次进阶四次进阶结界五次进阶六次进阶七次进阶八次进阶九次进阶终章彩蛋 入门 Vue.js中，计算属性示例： export default {data() {return {firstName: John,lastName: Doe};},computed: {// 计算属性：全名fullNam…...
深度学习本科课程 实验2 前馈神经网络
任务 3.3 课程实验要求 （1）手动实现前馈神经网络解决上述回归、二分类、多分类任务 l 从训练时间、预测精度、Loss变化等角度分析实验结果（最好使用图表展示） （2）利用torch.nn实现前馈神经网络解决上述回归…...
【python】python爱心代码【附源码】
一、实现效果： 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 二、完整代码： import math import random import threading import time from math import sin, cos, pi, log from tkinter import * import re# 烟花相关设置 Fireworks [] m…...
Linux---信号
前言 到饭点了，我点了一份外卖，然后又开了一把网游，这个时候，我在打游戏的过程中，我始终记得外卖小哥会随时给我打电话，通知我我去取外卖，这个时候游戏还没有结束。我在打游戏的过程中需要把外…...
-Java版)
24种设计模式之行为型模式(下)-Java版
软件设计模式是前辈们代码设计经验的总结，可以反复使用。设计模式共分为3大类，创建者模式(6种)、结构型模式(7种)、行为型模式(11种)，一共24种设计模式，软件设计一般需要满足7大基本原则。下面通过5章的学习一起来看看设计模式的魅…...
基于微信小程序的校园水电费管理小程序的研究与实现
博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
python二维高斯热力图绘制简单的思路代码
import numpy as np import matplotlib.pyplot as plt from scipy.ndimage import gaussian_filter import cv2# 生成一个示例图像 image_size 100 image np.zeros((image_size, image_size))# 在图像中心创建一个高亮区域 center_x, center_y image_size // 2, image_size …...
k8s 部署 nocas 同时部署mysql
使用 ygqygq2 的 helm 模板部署 官方地址：https://artifacthub.io/packages/helm/ygqygq2/nacos 添加 helm 仓库 helm repo add ygqygq2 https://ygqygq2.github.io/charts/下载 helm 安装文件 helm pull ygqygq2/nacos解压 tar -zxvf nacos-2.1.6.tgz执行 hel…...
GolangCI-Lint配置变更实践
GolangCI-Lint配置变更实践 Golang编程中，为了便于调试和代码质量和安全性检查。利用该方法可以在开发周期的早期捕获错误，并且检查团队编程风格，提高一致性。这对团队协作开发特别有用，可以提高开发的效率，保持代码质…...
UE中对象创建方法示例和类的理解
对象创建方法示例集 创建Actor示例 //创建一个护甲道具 AProp* armor GetWorld()->SpawnActor<AProp>(pos, rotator); 创建Component示例 UCapsuleComponent* CapsuleComponent CreateDefaultSubobject<UCapsuleComponent>(TEXT("CapsuleComponent&qu…...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
C++：多态机制详解
目录 一. 多态的概念 1.静态多态（编译时多态） 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1）.协变 2）.析构函数的重写 5.override 和 final关键字 1&#…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗？ 在ComfyUI中实现图生视频并延长到5秒，需要结合多个扩展和技巧。以下是完整解决方案： 核心工作流配置（24fps下5秒120帧） #mermaid-svg-yP…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...
GAN模式奔溃的探讨论文综述（一）
简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...
CppCon 2015 学习:REFLECTION TECHNIQUES IN C++
关于 Reflection（反射） 这个概念，总结一下： Reflection（反射）是什么？ 反射是对类型的自我检查能力（Introspection） 可以查看类的成员变量、成员函数等信息。反射允许枚…...
虚幻基础：角色旋转
能帮到你的话，就给个赞吧 😘 文章目录 移动组件使用控制器所需旋转：组件 使用 控制器旋转将旋转朝向运动：组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转：必须移动才能旋转，不移动不旋转控制器…...