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);

    }

}

CSS动画（动态导航栏）的更多相关文章

  1. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  2. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  3. 动态导航栏和JavaScript箭头函数

    动态导航栏和JavaScript箭头函数 今天我们来写一下动态的导航栏,并且学一下JavaScript的箭头函数等相关问题. 样式如下所示: html中执行代码如下所示: <!DOCTYPE h ...

  4. CSS实现动画特效导航栏

    0 写在前面 今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果 当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2 ...

  5. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  6. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  7. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  8. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  9. html+css 制作简易导航栏

    二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  10. jsp动态导航栏

    站点页面的导航栏是从数据库中生成出来的,所以在界面上展示导航栏时,要从数据库中读取出来,但不能每次显示一个页面都从数据库中读.这样就非常浪费性能.应该考虑把导航栏放到一个缓存中.如:session.a ...

随机推荐

  1. 旋转数组-python

    旋转数组 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] 解释: 向 ...

  2. .net5调用WebService简单事例

    1. 创建 .net5控制台项目: dotnet new console -o WebServiceConsole 2. 添加全局工具 dotnet tool install --global dot ...

  3. loj6669 Nauuo and Binary Tree 题解

    https://loj.ac/p/6669 赛时做法 先 \(n-1\) 次问出深度 逐层考虑.slv(vector<int> a,vector<int> b) 表示在点集 \ ...

  4. Kummer 定理

    \(n!\) 中含素数 \(p\) 的幂次为 \(\displaystyle\sum_{i=1}\lfloor\frac{n}{p^{i}}\rfloor\) Kummer 定理:\({n+m\cho ...

  5. GC终结标记 SuspendEE 是怎么回事

    一:背景 1. 讲故事 写这篇是起源于训练营里有位朋友提到了一个问题,在 !t -special 输出中有一个 SuspendEE 字样,这个字样在 coreclr 中怎么弄的?输出如下: 0:000 ...

  6. Microsoft Build Next-Gen Windows Dev (placeholder)

    This is a placeholder page for Microsoft Build after party in next Month. Will update once I get det ...

  7. Consul初探-从安装到运行 【转】

    目录 前言 下载二进制包 入门必学必记文档 启动 Consul 前言 伟人说过:实践是检验真理的唯一标准!经过上一篇的学习,我基本掌握了 Consul 的基本原理,接下来就是动手实践了:Consul ...

  8. 深度学习模型训练的过程理解(训练集、验证集、测试集、batch、iteration、epoch、单步预测、多步预测、kernels、学习率)

    呜呜呜呜,感谢大佬学弟给我讲干货. 本来是讨论项目的,后面就跑偏讲论文模型了. 解答了我一直以来的疑问: 数据放模型里训练的过程. 假设我们有一个数据集26304条数据,假设设置模型读入1000条,如 ...

  9. Figma 学习笔记 – Component

    参考 Guide to Components in Figma Figma Tutorial: Components - The Basics (Youtube) 定义与用途 Figma 的 Comp ...

  10. CMake构建学习笔记16-使用VS进行CMake项目的开发

    目录 1. 概论 2. 详论 2.1 创建工程 2.2 加载工程 2.3 配置文件 2.4 工程配置 2.5 调试执行 3. 项目案例 4. 总结 1. 概论 在之前的系列博文中,我们学习了如何构建第 ...