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);  
    }  
}
相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#