ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 10px;
left: 300px;
padding: 10px 0 10px 10px;
background: url(shad2.png) no-repeat;
background-position:right;
}
ul.nav li a
{
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
background: #005A9C url(border.png) no-repeat;
background-position: right;
color: #FFFFFF;
padding: 7px 15px 7px 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
ul.nav li a:hover
{
background: #ebebeb url(border.png) no-repeat;
color: #005A9C;
padding: 7px 15px 7px 30px;
}
上述CSS过渡产生一个在每个li a上从左向右移动的过渡。如何将过渡效果反转为从右向左移动。看起来像是一个默认的CSS3属性。
答案 0 :(得分:0)
更改padding
:
ul.nav li a {
...
padding: 7px 15px 7px 30px;
}
ul.nav li a:hover {
...
padding: 7px 35px 7px 20px;
position:relative;
left:-20px;
}