纯css实现滑动特效(滑动门)

基本信息

源码名称：纯css实现滑动特效(滑动门)

源码大小：0.20M

文件格式：.zip

开发语言：CSS

更新时间：2018-06-07

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!doctype htimgl>
<htimgl>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{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;
	}
</style>
</head>

<body>
<div class="dabox">

<div class="box">
<img src="images/m1.jpg" alt=""/>
<h3>杭州</h3>
<p>雨碎江南，人间天堂</p>
</div>
<div class="box">
<img src="images/m2.jpg" alt=""/>
</div>
<div class="box">
<img src="images/m3.jpg" alt=""/>
</div>
<div class="box">
<img src="images/m4.jpg" alt=""/>
</div>
<div class="box">
<img src="images/m5.jpg" alt=""/>
</div>
<div class="box">
<img src="images/m6.jpg" alt=""/>
</div>
<div class="box">
<img src="images/m7.jpg" alt=""/>
</div>

</div>
</body>
</htimgl>