CSS动画(动态导航栏)

1.项目简介

一个具有创意的导航菜单不仅能为你的大作业增色,还能展示你的技术实力。本文将分享一系列常用于期末大作业的CSS动画导航效果,这些效果不仅外观酷炫,而且易于实现。我们提供了一键复制的代码,让你能够快速集成到自己的项目中,节省时间,提高效率,让你的期末大作业脱颖而出。

2.完整代码

HTML

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

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);  
    }  
}
相关推荐
小墨宝27 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED42 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿1 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子1 小时前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet