CSS动画(动态导航栏)

1.项目简介

一个具有创意的导航菜单不仅能为你的大作业增色,还能展示你的技术实力。本文将分享一系列常用于期末大作业的CSS动画导航效果,这些效果不仅外观酷炫,而且易于实现。我们提供了一键复制的代码,让你能够快速集成到自己的项目中,节省时间,提高效率,让你的期末大作业脱颖而出。

2.完整代码

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>Title</title>  <link rel="stylesheet" type="text/css" href="6_21.css">  
</head>  
<body>  
<nav>  <!-- 导航栏按钮,用于主要页面导航 -->  <nav>  <!-- 主页按钮,包含文本和图标表示 -->  <button type="button" title="Home">  <span>Home</span>  <!-- 使用Material Symbols Outline图标的HTML代码,用于增强视觉效果 -->  <span class="material-symbols-outlined" aria-hidden="true">首页</span>  <!-- SVG图形用于呈现"Home"文本的视觉效果,aria-hidden属性表示此元素不用于屏幕阅读器 -->  <svg viewBox="0 0 300 300" aria-hidden="true">  <g>  <!-- 使用textPath元素将文本沿着路径绘制 -->  <text fill="currentColor">  <textPath xlink:href="#circlePath">Home</textPath>  </text>  <text fill="currentColor">  <textPath xlink:href="#circlePath" startOffset="50%">Home</textPath>  </text>  </g>  </svg>  </button>  <!-- 关于按钮,包含文本和图标表示 -->  <button type="button">  <span>About</span>  <span class="material-symbols-outlined" aria-hidden="true">信息</span>  <svg viewBox="0 0 300 300" aria-hidden="true">  <g>  <text fill="currentColor">  <textPath xlink:href="#circlePath">About</textPath>  </text>  <text fill="currentColor">  <textPath xlink:href="#circlePath" startOffset="50%">About</textPath>  </text>  </g>  </svg>  </button>  <!-- 服务按钮,包含文本和图标表示 -->  <button type="button">  <span>Services</span>  <span class="material-symbols-outlined" aria-hidden="true">服务</span>  <svg viewBox="0 0 300 300" aria-hidden="true">  <g>  <text fill="currentColor">  <textPath xlink:href="#circlePath">Services</textPath>  </text>  <text fill="currentColor">  <textPath xlink:href="#circlePath" startOffset="50%">Services</textPath>  </text>  </g>  </svg>  </button>  <!-- 联系按钮,包含文本和图标表示 -->  <button type="button">  <span>concat</span>  <span class="material-symbols-outlined" aria-hidden="true">联系</span>  <svg viewBox="0 0 300 300">  <g>  <text fill="currentColor" aria-hidden="true">  <textPath xlink:href="#circlePath">Contact</textPath>  </text>  <text fill="currentColor">  <textPath xlink:href="#circlePath" startOffset="50%">Contact</textPath>  </text>  </g>  </svg>  </button>  </nav>  <!-- SVG 模板与动态文本 -->  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 300 300" width="0" height="0">  <defs>  <path id="circlePath" d="M 150, 150 m -50, 0 a 50,50 0 0,1 100,0 a 50,50 0 0,1 -100,0" />  </defs>  </svg>  
</body>  
</html>

CSS

* {  margin: 0;  padding: 0;  box-sizing: border-box;  
}  
/* 重置按钮样式 */button {  appearance: none;  background-color: transparent;  border: none;  cursor: pointer;  outline: none;  padding: 0;  margin: 0;  font-family: inherit;  font-size: inherit;  color: inherit;  text-decoration: none;  text-transform: none;  line-height: normal;  overflow: visible;  
}  body {  min-height: 100svh;  background-color: rgb(15, 23, 42);  color: white;  display: grid;  place-content: center;  font-size: 1rem;  font-family: system-ui;  
}  nav {  --_clr-txt: rgb(255, 255, 255);  --_clr-txt-svg: rgb(147, 158, 184);  --_ani-speed: 6s;  /* 旋转文本的速度 */  display: flex;  /*flex-wrap: wrap;*/  gap: 1rem;  font-size: 1.4rem;  
}  nav>button {  position: relative;  display: grid;  place-content: center;  grid-template-areas: 'stack';  padding: 0 1.5rem;  text-transform: uppercase;  font-weight: 300;  
}  /* 将按钮元素堆叠在一起 */nav>button>span {  transition: all 300ms ease-in-out;  grid-area: stack;  
}  /* 导航图标 */nav>button>span:last-of-type {  margin-top: 0.25rem;  transform: scale(0);  transition-delay: 0ms;  border-radius: 50%;  
}  /* 悬停 - 隐藏文本 */nav>button:focus-visible>span:first-of-type,  
nav>button:hover>span:first-of-type {  transform: scale(0);  
}  /* 悬停 - 显示图标 */nav>button:focus-visible>span:last-of-type,  
nav>button:hover>span:last-of-type {  transform: scale(1);  
}  /* 导航 SVG 圆形文本 */nav>button>svg {  position: absolute;  width: 200px;  height: 200px;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  transform-origin: center;  opacity: 0;  text-transform: uppercase;  transition: all 300ms ease-in-out;  color: var(--_clr-txt-svg);  
}  /* 悬停 - 显示旋转的 SVG */nav>button:focus-visible>svg,  
nav>button:hover>svg {  transform: translate(-50%, -50%) scale(1);  opacity: 1;  transition-delay: 150ms;  transition: all 300ms ease-in-out;  
}  /*  
@supports (-webkit-touch-callout: none) {  
/* 特定于 iOS 设备 * /button svg {  
/* 调整 iOS 设备的位置 * /translate: -50% -50%;  
animation: rotate var(--_ani-speed) linear infinite;  
}  
}  
@supports not (-webkit-touch-callout: none) {  
*/  button svg g {  transform-origin: center;  animation: rotate var(--_ani-speed) linear infinite;  
}  @keyframes rotate {  0% {  transform: rotate(0deg);  }  100% {  transform: rotate(360deg);  }  
}

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

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

相关文章

掌握ChatGPT:提示工程入门详解

随着人工智能的发展&#xff0c;提示工程成为了使用ChatGPT等语言模型的核心技术。对于初学者&#xff0c;理解和运用提示工程是提高与ChatGPT互动效果的关键。 什么是提示工程&#xff1f; 提示工程是通过设计和优化输入文本&#xff08;提示&#xff09;来引导AI生成特定输出…

破碎的像素地牢探险:游戏分享

软件介绍 《破碎的像素地牢》是开源一款地牢冒险探索类的游戏&#xff0c;融合了日系RPG经典风格&#xff0c;玩家将控制主角进行未知场景的探索。除了经典地牢玩法外&#xff0c;游戏还添加了更多创意内容&#xff0c;如黑屏状态前的挑战性等&#xff0c;使得游戏更加富有挑战…

Vue78-缓存路由组件

一、需求 路由切走的时候&#xff0c;组件会被销毁&#xff0c;路由切回来&#xff0c;组件被挂载&#xff01; 需要&#xff1a;路由切走的时候&#xff0c;组件不会被销毁。 二、代码实现 若是不加include属性&#xff0c;则在<router-view>里面展示的路由&#xff0c…

ubuntu20.04安装配置openMVG+openMVS

安装 主要跟着官方教程逐步安装 openMVG https://github.com/openMVG/openMVG/blob/master/BUILD.md openMVS https://github.com/cdcseacave/openMVS/wiki/Building 注意事项 1. 库版本要求 使用版本&#xff1a; openMVS 2.2.0 openMVG Eigen 3.4.0 OpenCV 4.6.0 Ce…

华为开发者大会:全场景智能操作系统HarmonyOS NEXT

文章目录 一、全场景智能操作系统 - HarmonyOS NEXT1.1 系统特性1.2 关于架构、体验和生态 二、应用案例2.1 蚂蚁mpaas平台的性能表现 三、新版本应用框架发布3.1 新语言发布3.2 新数据库发布3.3 新版本编译器的发布 四、CodeArts和DataArts4.1 CodeArts4.2 DataArts 五、总结 …

高通安卓12-Input子系统

1.Input输入子系统架构 Input Driver(Input设备驱动层)->Input core(输入子系统核心层)->Event handler(事件处理层)->User space(用户空间) 2.getevent获取Input事件的用法 getevent 指令用于获取android系统中 input 输入事件&#xff0c;比如获取按键上报信息、获…

C++实现简单的哈希表

使用除留余数法计算哈希地址&#xff0c;使用拉链法解决哈希冲突&#xff0c;使用模板编程实现value为任意类型&#xff0c;但是key值只能是整型。链表使用CSTL库中的list&#xff0c;实现了一个简单的哈希表。 #include <iostream> #include <vector> #include &l…

Cloudflare 常用操作

一、域名托管到cloudflare 登录cloudflare->添加站点->填写域名(例如阿里云)->继续选择free套餐->继续->保存cloudflare分配的DNS地址->进入阿里云域名管理->进入DNS管理/DNS修改把DNS地址修改为cloudflare分配的两个DNS->保存->回到cloudflare->…

返利系统中的用户行为分析与推荐算法

返利系统中的用户行为分析与推荐算法 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代电子商务平台中&#xff0c;返利系统是一种重要的用户激励手段&am…

深入理解Python中的并发与异步的结合使用

​ 在上一篇文章中&#xff0c;我们讨论了异步编程中的性能优化技巧&#xff0c;并简单介绍了trio和curio库。今天&#xff0c;我们将深入探讨如何将并发编程与异步编程结合使用&#xff0c;并详细讲解如何利用trio和curio库优化异步编程中的性能。 文章目录 并发与异步编程的区…

【数据结构与算法】二叉树的性质 详解

在二叉树的第i层上至多有多少个结点。 在二叉树的第 i 层上至多有 2 i − 1 2^{i-1} 2i−1 个结点(i≥1)。 深度为 K的二叉树至多有多少个结点。 深度为 k 的二叉树上至多含 2 k − 1 2^k - 1 2k−1 个结点(k≥1)。 在一颗二叉树中, 其叶子结点数n0和度为二的结点数n2之间…

安装CDH时报错:Parcel 不可用于操作系统分配 RHEL7,原因与解决办法~

报错信息&#xff1a; 解决办法与思路&#xff1a; 1、检查CDH包的后缀名称&#xff0c;Redhat与Centos安装时不需要修改后缀名称&#xff0c;麒麟系统安装时才需要修改。 2、目录里面需要有xxx.parcel xxx.parcel.sha manifest.json 三个文件 缺一不可&#xff08;注&#x…

Transformer预测 | 基于Transformer的锂电池寿命预测(Pytorch,CALCE数据集)

文章目录 文章概述模型描述程序设计参考资料文章概述 Pytorch实现基于Transformer 的锂电池寿命预测,环境为pytorch 1.8.0,pandas 0.24.2 随着充放电次数的增加,锂电池的性能逐渐下降。电池的性能可以用容量来表示,故寿命预测 (RUL) 可以定义如下: SOH(t)=CtC0100%, 其中,…

JQuery 概念、历史、发展、优势-JQuery开发教程

一、JQuery 框架简介 jQuery 是一个 轻量级 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 jQuery是一个快速、简洁的JavaScript框架&#xff0c;是继Prototype之后又一个优秀的JavaScript代码库&#xff08;框架&#xff09;于2006年1月由Joh…

@NotBlank、@NotNull、@NotEmpty、@NonNull四者之间的区别

文章目录 NotNullNotEmptyNotBlankNonNull NotNull 1.NotNull&#xff1a;用在基本类型上&#xff0c;不能为null&#xff0c;但可以为空字符串 NotEmpty 2.NotEmpty&#xff1a;用在集合类上&#xff0c;不能为null&#xff0c;并且长度必须大于0 NotBlank 3.NotBlank&am…

HarmonyOS Next 系列之可移动悬浮按钮实现(六)

系列文章目录 HarmonyOS Next 系列之省市区弹窗选择器实现&#xff08;一&#xff09; HarmonyOS Next 系列之验证码输入组件实现&#xff08;二&#xff09; HarmonyOS Next 系列之底部标签栏TabBar实现&#xff08;三&#xff09; HarmonyOS Next 系列之HTTP请求封装和Token…

ios swift5 播放视频失败 本地的可以 网页链接播放失败

Main thread blocked by synchronous property query on not-yet-loaded property (PreferredTransform) for HTTP(S) asset. This could have been a problem if this asset were being read from a slow network. Asset is not playable

基数排序!

大鸡排&#xff5e; 算法描述定义常量和全局变量初始化PowOfBase数组输入函数和输出函数获取某一位的基数值基数排序函数主函数 完整代码 https://articles.zsxq.com/id_flaketn5n3uo.html 算法描述 定义常量和全局变量 const int MAXN 100005; // 1 const int MAXT …

MQ~消息队列能力、AMQP协议、现有选择(Kafka、RabbitMQ、RocketMQ 、Pulsar)

消息队列 消息队列看作是一个存放消息的容器&#xff0c;当我们需要使用消息的时候&#xff0c;直接从容器中取出消息供自己使用即可。由于队列 Queue 是一种先进先出的数据结构&#xff0c;所以消费消息时也是按照顺序来消费的。 常⽤的消息队列主要这 五 种&#xff0c;分别…

使用 DISPATCHERS 进行 Blueprint 之间的通信

文章目录 初始准备DISPATCHERS 的创建和绑定实现效果 初始准备 首先 UE5 默认是不提供 静态网格体编辑器也就是 Modeling Mode 的&#xff0c;这里需要从插件中添加 Modeling Tools Editor Mode 进入 Modeling Mode 模式&#xff0c;创建一个正方体 然后利用 PolyGroup Edit 和…