html如何做滑动门效果,纯css实现滑动特效(滑动门)

【实例简介】

【实例截图】

【核心代码】

无标题文档

*{margin:0;padding:0;}

img{border:none;}

.dabox{

width:1236px;

height:350px;

border:1px solid #666;

margin:30px auto;

}

.box{

width:137px;

height:325px;

float:left;

margin:10px 6px;

position:relative;

overflow:hidden;

}

.box h3{

width:303px;

height:24px;

color:#fff;

border-bottom:1px solid #fff;

position:absolute;

}

.box p{

font-size:14px;

color:#fff;

position:absolute;

left:5px;

top:30px;

}

.box img{

width:330px;

height:100%;

position:absolute;

}

.box:hover img{

width:330px;

}

.box:hover{

width:330px;

}

杭州

雨碎江南，人间天堂