CSS实现菜单圆角背景

圆角效果很漂亮,实现起来也有很多方法。

以前介绍过一个纯CSS的圆角效果的实现方法。不过那个方法在写结构的时候比较繁琐,而且理解起来有点麻烦,所以我自己在做模板时也没有实际运用过。

今天要说的是目前本站导航菜单鼠标划过时的菜单背景圆角效果。由下面截图可以看出,对不同长短的内容都可以较好的支持。

导航条

这个圆角效果不是纯css的,而是用到了一张图片,实现起来也比较简单。而且图片有图片的好处就是你可以随意制作比较华丽的圆角图片来实现不同的效果。下面以本站为例简单说一下方法。HTML部分如下:

<ol id="nav"> <li><a href="http://www.dimlau.com/"><b>首页</b></a></li> <li><a href="http://www.dimlau.com/blog/"><b>日志</b></a></li> <li><a href="http://www.dimlau.com/about/"><b>关于</b></a></li> <li><a href="http://www.dimlau.com/mailtome/"><b>联系</b></a></li> <li><a href="http://www.dimlau.com/links/"><b>链接</b></a></li> <li class="current"><a href="http://www.dimlau.com/blog/archives.html"><b>站点地图</b></a></li> </ol>

CSS部分如下:

#nav li {     list-style: none;     display: inline; } #nav a {     display:block;      float:left;     height:24px; /*根据你制作的图片高度而定*/     line-height:24px;     text-decoration:none;      text-align:center;     padding:0 0 0 5px; /*根据图片的圆角弧线部分宽度而定*/     cursor:pointer; } #nav a b {     float:left;     display:block;     padding:0 5px 0 0; } #nav a:hover {     background:#425777 url(images/neatly/li1.png); } #nav a:hover b {     background:url(images/neatly/li1.png) no-repeat right top; }

其中用到的唯一一张图片如下:

 背景

简要解释一下原理:如下图,<li>标签内的a和b元素都被定义display:block。a元素的背景图将会充满整个<li>标签(也就是下图黑色方框内部区域),由于a元素属性定义了padding:0 0 0 5px;所以其内的b元素背景图将不会充满整个<li>标签,而是会在左侧留出5px的空隙(也就是可以充满下图黄色区域),于是a元素背景图的最左边的5px将不会被盖住,此处即可显示左侧的圆角背景。而b元素的背景图则实现了右侧圆角的显示。

讲解

效果就见本站导航菜单了。要注意的是,那张唯一的背景图片在制作时尽量做的长一点,免得菜单条目内容过长的时候会出现背景图错位的情况。

可能没说清楚,不过原理本身就不复杂,相信大部分人自己看也能明白吧。顺便,QQ的截图功能还是很方便的,但是对于不常开QQ的人来说就没用了,有人提取了QQ的截图功能制作了一个小软件,这里可以下载:点击进入

 

转自:http://www.dimlau.com/blog/2008/01/css-3.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现一个 CSS3 3D 椭圆旋转菜单,可以按照以下步骤进行: 1. 创建菜单HTML 结构,可以使用 ul 和 li 标签来实现,每个 li 标签内包含一个链接或者按钮等。 2. 使用 CSS3 的 transform 属性实现 3D 效果。我们可以使用 rotateX 和 rotateY 属性来实现 X 轴和 Y 轴的旋转效果,使用 translateZ 属性来实现 Z 轴的平移效果。 3. 使用 CSS3 的 transition 属性来实现菜单的过渡效果,例如鼠标悬停时菜单的旋转效果。 下面是一个简单的例子: HTML 代码: ```html <ul class="menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> <li><a href="#">菜单项5</a></li> </ul> ``` CSS 代码: ```css .menu { position: relative; width: 400px; height: 200px; margin: 100px auto; transform-style: preserve-3d; } .menu li { position: absolute; width: 100px; height: 50px; background-color: #ccc; border-radius: 50%; text-align: center; line-height: 50px; font-size: 16px; color: #fff; transform-origin: 50% 50%; transition: transform 0.5s ease-in-out; } .menu li:nth-child(1) { transform: rotateY(0deg) translateZ(200px); } .menu li:nth-child(2) { transform: rotateY(72deg) translateZ(200px); } .menu li:nth-child(3) { transform: rotateY(144deg) translateZ(200px); } .menu li:nth-child(4) { transform: rotateY(216deg) translateZ(200px); } .menu li:nth-child(5) { transform: rotateY(288deg) translateZ(200px); } .menu li:hover { transform: rotateX(90deg) translateZ(50px); } ``` 在这个例子中,我们使用了一个 ul 标签来创建菜单,并且设置了它的宽度、高度和位置。每个 li 标签表示一个菜单项,我们设置了它的宽度、高度、背景颜色、圆角和对齐方式等。我们使用了 transform-origin 属性来设置旋转的基准点,使用 translateZ 属性来设置菜单项在 Z 轴上的位置。 在菜单项的样式中,我们使用了 transform 属性来实现旋转和平移的效果。我们使用了 transition 属性来实现菜单项的过渡效果。在鼠标悬停时,我们通过设置 transform 属性来实现菜单项的旋转效果。 最后,我们可以通过调整 transform 属性的值来实现不同的旋转效果和菜单项的位置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值