CSS动画（动态导航栏）

最新推荐文章于 2024-06-22 17:21:25 发布
最新推荐文章于 2024-06-22 17:21:25 发布
阅读量624 收藏 4
点赞数 12
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_82176667/article/details/139856668
版权

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);  
    }  
}
写代码的大学生
关注
  • 12
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
css动画实现二级导航栏
wangxue8203的博客
08-10 2096
描述：鼠标悬空在导航栏上时，二级导航栏以动画方式旋转出现。 实现代码： &lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;二级动画导航&lt;/title&gt;  &lt;/head&gt;  &lt;style
css订单导航栏横线动画,小程序 纯css 实现tab导航栏下划线跟随动画
weixin_29062671的博客
08-04 1166
很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：在开发者工具中预览效果t3fyo-a07nj.gif我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。css3实现：先看最基本的.wxml布局：image.png从图中可以看到，当前tap的line是用专门用...
css动画导航栏
m0_54242568的博客
11-30 228
css动画导航栏
css:动画 高级垂直导航栏 王者荣耀导航栏
qq_36413371的博客
10-08 701
垂直导航栏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content=
CSS实现动画特效导航栏
weixin_30511039的博客
03-30 1037
0 写在前面 　　今天用纯CSS编写了一种带有特效的导航栏，一方面巩固熟悉了导航栏的一般写法，另一方面练习了CSS3的一些新特性。 1 实现效果 　　当鼠标划过时，实现了一种动态百叶窗效果。 2 实现细节 2-0 导航栏基本架构 　　首先复习导航栏的基本架构，导航栏的实现，采用的是ul-li的结构，为了能够实现导航效果，可以在li内部增加一个a标签。 　　实现导航...
HTML css jQuery实现导航栏(华丽动画)
m0_63823390的博客
10-11 1105
HTML css jQuery实现导航栏(华丽动画)
HTML+CSS实现动画导航栏
道阻且长，行则将至。
01-14 1390
HTML+CSS实现动画导航栏 话不多说，先上效果图 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s
使用CSS3动画制作导航菜单
yuhaowen的博客
05-04 1863
使用CSS3动画制作导航菜单 1、使用定位属性把图片“赚”和“花”设置到相对应的位置上 2、使用animation属性给中间的“赚”和“花”图片设置动画，动画效果为鼠标移入“赚”图片的时候变为“赚积分”， 并且是从左到右缓慢展开的效 果 3、使用transition属性给右边的“论”图片设置动画，效果为鼠标移入旋转360° 效果展示 代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
使用 CSS 构建自定义粘性导航栏
分享身边生活经验blog
10-20 988
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式。人们通常将导航栏放在页面的最顶部，但如果它与您的设计相得益彰，您也可以在网页的任一侧放置导航栏。导航栏可以是导航项目的水平列表，也可以是小屏幕上网页左上角或右上角的汉堡样式。为了更好地访问导航栏，您可以使用几行 CSS 和 JavaScript 将它们粘贴在顶部。随着导航栏复杂性的增加，可能会堆积更多的 JavaScript 代码。
使用CheckBox的属性制作纯css动态导航栏
09-24
传统的做法是利用JavaScript库如jQuery来实现这些动态效果，但随着CSS3的不断发展，我们可以使用纯CSS来实现一些复杂的交互，例如本文提到的使用CheckBox的`checked`属性来制作动态导航栏。 `Checkbox`在HTML中是一...
CSS3鼠标经过导航菜单动画效果代码
06-05
CSS3制作的一款简单鼠标经过导航菜单动画效果代码，三种菜单栏效果分别是：前后旋转，上浮，左右旋转。
黑色css3导航栏下拉菜单动画特效
11-19
黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效
html+css 实现简易导航栏功能
09-22
这个 ID 在 CSS 中用于定义导航栏的样式。在这个 `div` 内，我们有一个无序列表 `<ul>`，其中包含多个列表项 `<li>`。每个列表项都包含一个链接 `<a>`，分别指向不同的页面，如首页、朋友、商城和下载客户端。 CSS ...
css3竖直导航栏鼠标点击导航水波动画特效
11-21
css3竖直导航栏鼠标点击导航水波动画特效 css3竖直导航栏鼠标点击导航水波动画特效 css3竖直导航栏鼠标点击导航水波动画特效
【CSS】css 的opacity属性作用是什么，原理是什么，怎么使用
读心悦
06-19 351
值时，浏览器会渲染该元素和其所有子元素时应用这个不透明度。这意味着，如果你给一个包含文本的。是 CSS 中的一个属性，它用于设置元素的不透明度。值定义了该元素和其所有子元素相对于其正常的不透明度的可见程度。属性，或者在 HTML 元素中使用内联样式。的值范围是从 0（完全透明）到 1（完全不透明）。的背景会变得半透明，里面的文本也会变得半透明。你可以直接在 CSS 样式表中设置。希望这能帮助你理解 CSS 的。
【CSS in Depth2精译】1.4 简写属性
最新发布
PeacefulWinter的博客
06-22 903
本节主要讲解了 CSS 简写属性的基本用法和一些重要的注意事项。对于简写属性的样式值的顺序做了详细说明，并结合示例分别给出了两类记忆口诀。
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 759
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
CSS 创建：从入门到精通
wjs2024的博客
06-22 348
CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS描述了如何将结构化数据（如HTML文档）呈现为视觉格式，例如颜色、字体和布局。
uniapp+unocss报错Error [ERR_REQUIRE_ESM]: require() of ES Module
海风依旧
06-16 344
uniapp+unocss报错Error [ERR_REQUIRE_ESM]: require() of ES Module
css动画顶部导航栏显示隐藏
05-19
可以使用CSS的`transition`和`transform`属性来实现顶部导航栏的显示和隐藏。 首先，需要设置导航栏的样式，包括背景色、高度、文字颜色等。然后，将导航栏的位置设置为相对定位，并将其向上偏移其自身高度的距离，使其隐藏在页面顶部。 接着，通过CSS的`hover`伪类或JavaScript来触发导航栏的显示和隐藏。当鼠标悬停在页面顶部时，将导航栏的位置向下偏移其自身高度的距离，使其显示在页面上方；当鼠标离开时，将导航栏的位置恢复到原来的状态，使其隐藏在页面顶部。 以下是一个基本的实现示例： ```html <nav class="top-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> ``` ```css .top-nav { position: relative; top: -50px; /* 偏移导航栏自身高度的距离，使其隐藏在页面顶部 */ height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50px; transition: all 0.3s ease; } .top-nav:hover { top: 0; /* 偏移导航栏自身高度的距离，使其显示在页面上方 */ } ``` 当鼠标悬停在导航栏上时，导航栏会向下滑动显示；当鼠标离开时，导航栏会向上滑动隐藏。你可以根据自己的需要，进行更改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

写代码的大学生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值