css3滑动门 |jqcss 操作

/*html*/
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
</ul>
/*CSS*/
.menu li a {
display: block;
width: 100px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
text-decoration: none;
position: relative;
z-index: 1;
}
.menu li a:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #666;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease-in-out;
}
.menu li a:hover:before {
transform: scaleX(1);
}

上述代码中，大家首先为菜单项的链接定义了一些样式，包括宽度、高度、背景颜色、颜色等。为了实现滑动门效果，大家需要使用伪元素:before来创建一个在链接上面的层。这个层会在链接的悬停状态下扩展到整个菜单项的宽度。大家使用transform属性来实现这个动画。具体来说，大家使用scaleX()函数将层在x轴方向上的比例从0变为1。

通过CSS3，大家可以很容易地实现漂亮的滑动门菜单。它不仅可以让网站看起来更现代和吸引人，还可以提高用户体验。