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);  
    }  
}
相关推荐
咔叽布吉6 分钟前
【前端学习笔记】ES6 新特性
前端·笔记·学习
推开世界的门39 分钟前
web 中 canvas 污染 以及解决方案
前端
星离~1 小时前
css—轮播图实现
前端·css
龙雨LongYu121 小时前
vue3+ts 我写了一个跟swagger.yml生成请求和响应实体(接口)
前端·vue.js·typescript
Stanford_11062 小时前
关于IDE的相关知识之一【使用技巧】
前端·ide·windows·微信小程序·微信公众平台·twitter·微信开放平台
_志哥_2 小时前
web开发环境下启动HTTPS服务访问
前端·javascript·https
爱健身的小刘同学2 小时前
安装 electron 依赖报错
前端·javascript·electron
耶啵奶膘2 小时前
uniapp+vue2+uview2.0导航栏组件二次封装
前端·javascript·uni-app
布兰妮甜2 小时前
如何使用 Tailwind CSS 构建响应式网站:详细指南
前端·css·tailwind css
MavenTalk2 小时前
前端技术选型之uniapp
android·前端·flutter·ios·uni-app·前端开发