其他分享
首页 > 其他分享> > css3技巧——产品列表之鼠标滑过效果translateY(三)

css3技巧——产品列表之鼠标滑过效果translateY(三)

作者:互联网

<div class="main">
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/5.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/3.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/10.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/11.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
</div>
.main *{
padding:0;
margin:0;
font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;
box-sizing: border-box;
-webkit-box-sizing: border-box;

}
大理石平台检验标准
.main { position: relative; width: 680px; margin: 0 auto; } .view { width: 300px; margin: 10px; float: left; border: 10px solid #fff; -webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; cursor: default; } .view figure { margin: 0; position: relative; } .view figure img { max-width: 100%; display: block; position: relative;
 

标签:css3,box,e6e6e6,translateY,2px,Girls,1px,滑过,Wonder
来源: https://www.cnblogs.com/furuihua/p/11782618.html