简要教程
这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。
使用方法
HTML结构
该导航菜单使用一个
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Demos</a></li>
<li><a href="#">中文</a></li>
</ul>
</nav>CSS样式
该导航菜单在鼠标滑过菜单项时，菜单项稍稍有些倾斜动画，并且在该菜单项的上下会有两条线条滑出。菜单项的倾斜动画是在菜单项被鼠标滑过时，使用transform属性来对超链接元素进行旋转和缩放。
li a {
display: block;
font-size: 20px;
text-align: center;
padding: 10px 15px;
}
li a:hover {
transform: rotate(5deg) scale(1.1);
}菜单项的上下2条线条使用超链接元素的:before和:after伪元素来制作。它们开始时透明度为0，宽度为0，并使用transform属性将它们旋转和移动。
立即学习“前端免费学习笔记（深入）”；
li a:before, li a:after {
opacity: 0;
border-top: 1px solid white;
content: '';
display: block;
position: relative;
z-index: -1;
margin: auto;
width: 0px;
}
li a:before {
top: 0px;
transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
li a:after {
top: 5px;
transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}在鼠标滑过时，它们的透明度变为1，宽度设置为20像素，并采用ease效果的平滑过渡。
li a:hover:before, li a:hover:after{
transition: all 0.3s ease;
opacity: 1;
width: 20px;
}以上就是纯CSS3创意导航菜单特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
480
