Question

我正在尝试在我的网页中设置一个固定的条形菜单，具有转换，而不是即时转换，而是1s转换。这里我留下代码

.sf-menu {
border-bottom: 3px solid #333;
background: #000;
position: relative;
padding: 0;
width: 100%;
}

.sf-menu > li {
border-right: 1px solid #333;
margin-bottom: -3px;
float:left;
}

.sf-menu > li > a {
border-bottom: 0px;
color: #B3B3B3;
font-family: 'Handlee', cursive;
font-weight: 500;
font-size: 28px;
text-transform: none;
font: 600 18px/22px "Open Sans", sans-serif;
color: #484848;
display: block;
padding: 17px 20px;
}

像这样，但我无法得到它

http://jsfiddle.net/ShL4T/8/

Answer 1

你想做什么样的过渡？我为您添加了一个简单的背景颜色变化fiddle

.sf-menu {
border-bottom: 3px solid #333;
background: #000;
position: relative;
padding: 0;
width: 100%;
}

.sf-menu > li {
border-right: 1px solid #333;
margin-bottom: -3px;
float:left;
}

.sf-menu > li > a {
border-bottom: 0px;
color: #B3B3B3;
font-family: 'Handlee', cursive;
font-weight: 500;
font-size: 28px;
text-transform: none;
font: 600 18px/22px "Open Sans", sans-serif;
color: #484848;
display: block;
padding: 17px 20px;
    background-color:green;
}

.sf-menu > li > a:hover{
  transition: background-color 1s ease;
  background-color: red;
}

这是一篇关于CSS过渡的好文章，应该有助于http://css-tricks.com/almanac/properties/t/transition/

如果你想做好动画，我建议你查看javascript库Greensock。它真的很快，并且做得很好。

Answer 2

注意到你的类标签我猜你可能正在使用Superfish导航插件。

如果是这样，动画的最佳方式将在他们的JavaScript文件中完成。这是文档的链接： http://users.tpg.com.au/j_birch/plugins/superfish/options/

您要使用的动画是：

speed: 'normal'
speedOut: 'fast'

固定栏菜单转换css

2 个答案: