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的样式来实现两侧滑动的效果。当鼠标经过元素的时候，通过设置相应的样式，来实现效果的切换。

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