具有滑动效果的纯CSS菜单[演示/源码]
作者:admin 时间:2022-8-13 8:33:16 浏览:本文介绍一个具有滑动效果的纯CSS菜单。
菜单介绍
当鼠标移到菜单上时，菜单滑动过渡效果高亮显示。
完整HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
nav {
--c: #E5DDCB;
--b: #524656;
background: var(--b);
display: flex;
}
ul {
margin: 0 0 0 auto;
padding: 0;
display: flex;
list-style: none;
}
ul li a {
padding: 0 .8em;
display: block;
color: #0000;
background:
linear-gradient(var(--c) 50%,var(--b) 0)
0% var(--_i,100%)/100% 200%;
text-shadow:
0 calc(2em - var(--_i,2em)) var(--c),
0 var(--_i,-2em) var(--b);
text-decoration: none;
font: bold 30px/2em sans-serif;
overflow: hidden;
outline-offset: -5px;
transition: .5s;
}
ul li a:hover,
ul li.active a{
--_i: 0px;
}
ul li a:focus-visible{
outline: 2px dashed var(--c);
}
ul li.active a:focus-visible {
outline-color: var(--b);
}
body {
margin: 0;
}
</style>
</head>
<body translate="no" >
<nav>
<ul id="menu">
<li><a href="/">首页</a></li>
<li class="active"><a href="/shop">商品展示</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系方式</a></li>
</ul>
</nav>
</body>
</html>
代码分析
HTML外层是一个<nav></mav>标签，菜单是一个<ul><li></li></ul>项目标签。
nav {
--c: #E5DDCB;
--b: #524656;
}--c 变量是当前菜单项背景颜色。 --b 变量是整个菜单栏的背景颜色。
ul li a {
...
color: #0000;
...
font: bold 30px/2em sans-serif;
...
}color是菜单文字颜色。font 是菜单文字大小及字体类型。
总结
本文介绍了一个具有滑动效果的纯CSS菜单，代码量不多，滑动效果是该菜单的特色，是一个实用的导航菜单。
相关文章
相关文章
x
- 站长推荐
