列表之鼠标滑过效果

来源：互联网发布：mac 终端路径查找编辑：程序博客网时间：2024/06/05 00:16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>列表之鼠标滑过效果</title><style>.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;}.view .thumb {overflow: hidden;}.view .mask {position: absolute;top: 0;left: 0;bottom:0;width: 100%;top: auto;bottom: 0;padding: 15px;background: rgb(233, 194, 236);color: #ed4e6e;}.view .mask h2 {margin: 0 0 5px;padding: 0 0 5px;color: #fff;font-size: 18px;line-height:14px;border-bottom:1px solid rgba(255,255,255,.2);}.view .mask p{font-size: 14px;margin-bottom: 5px;}.view .link {text-align: center;padding: 5px 10px;border-radius: 2px;display: inline-block;background: #ed4e6e;color: #fff;text-decoration:none;font-size: 14px;}.view-tenth figure {overflow: hidden;}.view-tenth figure img {-webkit-transition: -webkit-transform 0.4s;-moz-transition: -moz-transform 0.4s;transition: transform 0.4s;}.view-tenth figure:hover img{-webkit-transform: translateY(-50px);-moz-transform: translateY(-50px);-ms-transform: translateY(-50px);transform: translateY(-50px);}.view-tenth .mask {opacity: 0;-webkit-transform: translateY(100%);-moz-transform: translateY(100%);-ms-transform: translateY(100%);transform: translateY(100%);-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;transition: transform 0.4s, opacity 0.1s 0.3s;}.view-tenth figure:hover .mask {opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;-moz-transition: -moz-transform 0.4s, opacity 0.1s;transition: transform 0.4s, opacity 0.1s;}</style></head><body>       <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="http://blog.csdn.net/qq_29262833/article/details/78563269" 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="http://blog.csdn.net/qq_29262833/article/details/78563269" 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="http://blog.csdn.net/qq_29262833/article/details/78563269" 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="http://blog.csdn.net/qq_29262833/article/details/78563269" class="link">查看全文</a></div></figure></div></div></body></html>
阅读全文
0 0