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. .gitignore文件的使用方法（学习总结版）—— .gitignore 文件的配合用法

    本文紧接前文: .gitignore文件的使用方法(学习总结版) ============================================= 本文主要讨论前文中所说的一个操作,即: . ...

  2. php curl访问https 域名接口一直报错的问题

    这两天一直在对接一个https的接口 通过本地postman完美链接后再服务器一直报错 出现问题:linux 下 curl可以正常访问 但是PHP请求一直返回false 测试方法:var_dump(c ...

  3. 05-canvas绘制简单图形之三角形

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. ubuntu16.04/CentOS 7自动以root身份登录桌面

    ubuntu16.04 1.首先设置root用户密码: # sudo passwd root 输入普通用户密码,再输入root用户密码: 2.启用登录时的root选项: # 编辑50-ubuntu.c ...

  5. Kubernetes-3.2：kubespray安装高可用k8sv1.20.2集群及常见报错解决

    kubespray安装高可用k8s集群 环境介绍 系统环境 主机名 / IP地址 角色 内核版本 CentOS 7.6.1810 master1 / 192.168.181.252 master &a ...

  6. Scikit-learn从入门到放弃

    目录 Scikit-learn简介 SVM分类 随机森林回归 K-means聚类 前置建议阅读: 1.NumPy从入门到放弃 2.Pandas从入门到放弃 3.SciPy从入门到放弃 Scikit-l ...

  7. spm 一阶分析的Microtime onset应该如何填写？

    1. 如果对数据进行了slice timing, 那么在进行一阶分析时应该修改microtime onset和 microtime resolution这两个参数, 假设数据的slice order= ...

  8. 6.13API接口服务类漏洞探针

    ip地址解析:www.x.x.x.com, 对应网站目录为d:/wwwroot/xiaodi/ 而127.x.x.x,对应网站目录为d:/wwwroot/,可能存在网站备份文件zip,所以ip网址端口 ...

  9. Git使用经验总结6-删除远端历史记录

    删除远端的历史记录但是不影响最新的仓库内容是笔者一直想实现的功能,有两个很不错的用处: 有的历史提交不慎包含了比较敏感的信息,提交的时候没注意,过了一段时间才发现.这个时候已经有了很多新的历史提交,无 ...

  10. CSS & JS Effect – Blue Tick Avatar

    效果 难点 难题只有一个, 那就是如何把 blue tick image 定位当 avatar 的右下角. HTML <div class="avatar-wrapper"& ...