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. TGI 多-LoRA: 部署一次，搞定 30 个模型的推理服务

    你是否已厌倦管理多个 AI 模型所带来的复杂性和高成本? 那么, 如果你可以部署一次就搞定 30 个模型推理服务会如何? 在当今的 ML 世界中,哪些希望充分发挥其数据的价值的组织可能最终会进入一个& ...

  2. vue3的defineAsyncComponent是如何实现异步组件的呢？

    前言 在上一篇 给我5分钟,保证教会你在vue3中动态加载远程组件文章中,我们通过defineAsyncComponent实现了动态加载远程组件.这篇文章我们将通过debug源码的方式来带你搞清楚de ...

  3. [天线原理及设计>基本原理] 2. 细线天线上的电流分配

    2. 细线天线上的电流分配 为了说明线性偶极子上电流分布的产生及其随后的辐射,让我们首先从无损双线传输线的几何形状开始,如图1.15(a)所示. 电荷的运动沿每条导线产生幅度为I0/2的行波电流.当电 ...

  4. Linux中级——“驱动” 控制硬件必须学会的底层知识

    驱动认知 1. 什么是驱动 驱动就是对底层硬件设备的操作进行封装,并向上层提供函数接口. 设备分类: linux系统将设备分为3类:字符设备.块设备.网络设备. 字符设备:指只能一个字节一个字节读写的 ...

  5. 逆向WeChat (五)

    本篇逆向mmmojo.dll,介绍如何使用mmmojo,wmpf_host_export的mojo. 本篇在博客园地址https://www.cnblogs.com/bbqzsl/p/18216717 ...

  6. Vuex的四个轻骑兵：mapState、mapGetter、mapMutation、mapAction(转载)

    vuex进阶一.state1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的data,通过state来存放状态 import Vue from 'vue'import Vue ...

  7. 专业级语义搜索优化：利用 Cohere AI、BGE Re-Ranker 及 Jina Reranker 实现精准结果重排

    专业级语义搜索优化:利用 Cohere AI.BGE Re-Ranker 及 Jina Reranker 实现精准结果重排 1. 简介 1.1 RAG 在说重排工具之前,我们要先了解一下 RAG. 检 ...

  8. 【题目全解】ACGO排位赛#12

    ACGO 排位赛#12 - 题目解析 别问为什么没有挑战赛#11,因为挑战赛#11被贪心的 Yuilice 吃掉了(不是). 本次挑战赛难度相比较前面几次有所提升. 爆料:小鱼现在已经入职了研发部门, ...

  9. CSS & JS Effect – Tooltip

    介绍 Tooltip 长这样 它用 popup 的方式来详细描述一个主体. 比如某个 icon 代表着什么. 参考 YouTube – How To Make Tooltips With Only C ...

  10. 【QT性能优化】QT性能优化之QT6框架高性能网络编程框架实现百万TCP长连接网络服务器：QT是否适合做高性能网络应用？补天云这个视频告诉你在大厂Linux云服务器上的实测结果

    QT性能优化之QT6框架高性能网络编程框架实现百万TCP长连接网络服务器 Ø 简介 本文作者编写了一套基于QT的TCP网络服务器程序和基于QT的TCP客户端程序,在某大厂的云服务器上进行了C1000K ...