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. mybatis-plus详细的图文教程（含视频讲解）

    1.课程大纲 2.目录链接 1.简介与CRUD快速使用 https://www.cnblogs.com/newAndHui/p/13938754.html 2.注解的使用 https://www.cn ...

  2. vue之element图标库使用与第三方阿里云图标库使用

    1.背景 2.element图标库使用 假设要做一个如下效果 代码如下: <!-- 输入框--> <el-form label-width="0px" class ...

  3. Java IO 流详解

    概述 流是一个抽象的概念,代表了数据的无结构化传递.流的本质是数据在不同设备之间的传输.在 Java 中,数据的读取和写入都是以流的方式进行的 在 Java 中,根据数据流向的不同,可以将流分为输入( ...

  4. 我们与高效工作流的距离：使用AI阅读工具ChatDOC+笔记软件Obsidian Slide，直接从 PDF 文献直接输出 PPT 报告

    我们与高效工作流的距离 在当今信息化的时代,为了实现高效工作和学习,如何实现快速地输入和输出成为每个人的必修课题. 然而,对于输入而言,每一天大量的信息,往往会使我们陷入信息过载和知识爆炸的困境,难以 ...

  5. OpenHarmony编译构建系统详解，从零搭建windows下开发环境，巨方便！

    自从OpenHarmony更新了dev-tool,就可以在windows下构建鸿蒙(轻量型)系统了,这对于进行MCU开发的朋友们,学习鸿蒙OS会友好许多!我们可以更快的构建出系统,方便快速学习和验证. ...

  6. 全志TinyVision芯片文章汇总

    全志TinyVision芯片 TinyVision开发交流QQ群:821628986 文章目录汇总 教程共计14章,下面是章节汇总: 第0章_TinyVision套件简述 第1章_源码工具文档手册 第 ...

  7. RISC-V全志D1多媒体套件文章汇总

    提示 此开发板的任何问题都可以在我们的论坛交流讨论 https://forums.100ask.net/c/aw/d1/57 文章目录汇总 教程共计14章,下面是章节汇总: 第0章_RISC-V全志D ...

  8. navicat远程连接报错

    mysql,2003 can't connect to mysql server on 10038 我们连接远程服务器的mysql,如果出现问题,很大问题会出在服务器的端口和授权问题 # 首先我们通过 ...

  9. Redis实战之session共享

    当线上集群时候,会出现session共享问题. 虽然Tomcat提供了session copy的功能,但是缺点比较明显: 1:当Tomcat多的时候,session需要大量同步到多台集群上,占用内网宽 ...

  10. EF Core报错“Format of the initialization string does not conform to specification starting at index 0.”

    问题分析: 今天在EF Core数据库迁移的过程中无意中发现此错误,我的项目仅仅复制黏贴了配置文件而已,自此发现是数据库配置文件json在作祟. 对比了下发现是.json文件没有被设置"复制 ...