css滑动门 左右

在网页设计中，CSS滑动门技术是一种非常实用的技巧，可以帮助我们实现页面中多种效果，例如左右滑动门。通过CSS代码的设置，我们可以轻松地实现这一效果，让您的网页更加炫酷。

.slide-door{
width: 960px;
height: 300px;
margin: 0 auto;
position: relative;
}
.slide-door ul{
width: 100%;
height: 300px;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
.slide-door ul li{
float: left;
width: 960px;
height: 300px;
margin: 0;
padding: 0;
list-style: none;
}
.slide-door ul li .door{
position: absolute;
width: 0;
height: 100%;
top: 0;
z-index: 100;
background: #fff;
overflow: hidden;
transition: all .5s ease-in-out;
}
.slide-door ul li .door:before{
content:"";
display: block;
position: absolute;
width: 50px;
height: 100%;
top: 0;
right: -25px;
background: url(images/bg.png) no-repeat;
background-position: -80px 0px;
border-radius: 0 50% 50% 0;
}
.slide-door ul li .door:after{
content:"";
display: block;
position: absolute;
width: 50px;
height: 100%;
top: 0;
left: -25px;
background: url(images/bg.png) no-repeat;
background-position: 0px 0px;
border-radius: 50% 0 0 50%;
}
.slide-door ul li:hover .door{
width: 50%;
}
.slide-door ul li.left:hover .door{
left: 0;
width: 50%;
}
.slide-door ul li.right:hover .door{
right: 0;
width: 50%;
}

这是CSS实现左右滑动门需要的代码。我们可以通过定义HTML元素的结构，以及CSS的样式来实现两侧滑动的效果。当鼠标经过元素的时候，通过设置相应的样式，来实现效果的切换。

通过以上代码的设置，可以实现一个完整的左右滑动门效果。在实际应用中，我们还可以调整代码的样式和细节，来满足我们的需求，让网页的效果更加炫酷。同时，在进行样式设置的时候，要注意浏览器兼容性，以确保不同浏览器中的显示效果一致。

查看更多关于css滑动门 左右的详细内容...