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. 【转载】 【Java分享客栈】我曾经的两个Java老师一个找不到工作了一个被迫转行了

      本文作者: 福隆苑居士 本文链接: https://www.cnblogs.com/fulongyuanjushi/p/16182465.html 版权声明: 本博客所有文章除特别声明外,均采用 ...

  2. 关于vue按需引入ElMessage和ElMessageBox未被自动引入到auto-important的问题

    相信关于按需引入大家应该都会了,不论是官网还是百度一大堆教程 我这边也是参照https://github.com/youlaitech/vue3-element-admin的写法去写的-----需要的 ...

  3. Mysql 不用Json存储 List<Long>的方式

    public static void main(String[] args) { List<Long> idList = new ArrayList<>(); for (int ...

  4. 使用Jackson读取xml

    找了不少,什么峰的,什么dn的参差不齐的资料,废话不少,问题是导入的包也没有.不多废话,看下面代码直接复用. package bean;import com.fasterxml.jackson.dat ...

  5. CH03_布局

    第3章:布局 本章目标 理解布局的原则 理解布局的过程 理解布局的容器 掌握各类布局容器的运用 理解 WPF 中的布局 WPF 布局原则 ​ WPF 窗口只能包含单个元素.为在WPF 窗口中放置多个元 ...

  6. openstack硬盘扩容

    1.挂载好新硬盘后输入fdisk -l命令看当前磁盘信息2.用fdisk /dev/vda 进行分区3.进入fdisk命令,输入h可以看到该命令的帮助,按n进行分区4.这里输入e即分为逻辑分区,按p即 ...

  7. uniCloud 云开发Dome

    实现账号密码登录,注册, 信息图片上传与查看 项目地址:https://gitee.com/jielov/uni-cloud_development 先创建云服务空间 与云函数 可参考 https:/ ...

  8. 一个操作系统的设计与实现——第19章 IA32-e模式

    19.1 64位段描述符与GDT 在32位操作系统中,我们使用的是平坦模型而非分段模型,从而,段描述符的段基址和段限长均成了摆设.在64位模式下,就连CPU也淘汰了分段模型,转而固定使用平坦模型. 6 ...

  9. the request was rejected because no multipart boundary was found

    报错: Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.t ...

  10. 【YashanDB数据库】yasboot查询数据库状态时显示数据库状态为off

    [问题现象] yasboot cluster status -c yashandb 显示数据库状态为off与数据库实际的状态不符,如下图 [问题分类]yasboot.yasdb使用问题 [关键字]ya ...