css3做了一个卷轴样式的菜单

最新推荐文章于 2025-03-27 08:48:41 发布

yeahsing

最新推荐文章于 2025-03-27 08:48:41 发布

阅读量2.7k

点赞数

分类专栏：学习文章标签：前端开发 CSS3 css 交互设计

本文链接：https://blog.csdn.net/yeahsing/article/details/9259373

版权

这篇博客展示了如何利用CSS3实现一个具有卷轴样式的菜单。通过设置不同的CSS属性，如过渡效果、阴影和宽度变化，创建了一个在鼠标悬停时宽度扩展的导航菜单。菜单项分为多个类别，每个类别都有独特的背景和边框效果，增强了用户体验。在WebKit浏览器中，此效果表现最佳。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/base.css" rel="stylesheet" type="text/css"/>
<title>无标题文档</title>
</head>
<style>
a{text-decoration:none;}
#nav{position:fixed; left:0px; top:200px;}
.nav_list{height:58px; position:relative; margin-top:10px; -moz-box-shadow:3px 3px #123456;  width:14px; -webkit-transition:width 1s linear; -moz-transition:width 1s linear;}
.border{ height:58px; width:7px; background:url(img/bian.jpg) no-repeat; float:left; -webkit-box-shadow:3px 3px 3px grey; -moz-box-shadow:3px 3px 3px grey;}
.nav_list ul{background:url(img/di.jpg) repeat-x; height:46px; float:left; marg

最低0.47元/天解锁文章