菜单链接转换CSS

Question

我正在尝试模拟此页面上显示的菜单的悬停链接效果： the documentation

我在我的网页上使用的代码是：

https://www.paifma.com/

.x-navbar .desktop .x-nav>li {
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

但它似乎不起作用。

Answer 1

1 - 您必须设置初始属性值和最终属性值才能进行转换

2 - 左和右是位置属性，为了达到我想要的效果和额外的div

height 1 
width 0 
disp. inline-block 
center aligned 

并在悬停时创建div width 100%（也使用过渡）