• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 2年前 (2017-09-28) 758次浏览 已收录 0个评论

不多说直接上效果

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

查看效果

 

html 代码:

<div class="main"> <div class="view view-tenth"> <img src="http://t-1.tuzhan.com/705648b6987e/c-2/l/2014/04/12/14/6bb27bdd03e3441283b0030e22789abe.jpg" /> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls 一向以青春活力的形象展现在观众面前,先后在韩国和美国乐坛都取得了不错的成绩...</p> <a href="#" class="link">查看全文</a> </div> </div> <div class="view view-tenth"> <img src="http://t-1.tuzhan.com/4457fe87956f/c-2/l/2014/04/12/14/9d3f9f225b1c425c8f0a97cee7d69362.jpg" /> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls 一向以青春活力的形象展现在观众面前,先后在韩国和美国乐坛都取得了不错的成绩...</p> <a href="#" class="link">查看全文</a> </div> </div> <div class="view view-tenth"> <img src="http://t-1.tuzhan.com/2a28cd7057c6/c-2/l/2014/04/12/14/11d939ad45674593bc35ef264953a23e.jpg" /> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls 一向以青春活力的形象展现在观众面前,先后在韩国和美国乐坛都取得了不错的成绩...</p> <a href="#" class="link">查看全文</a> </div> </div> <div class="view view-tenth"> <img src="http://t-1.tuzhan.com/830df96b6396/c-2/l/2014/04/12/14/7beb26fcb025486a8388ae1449f8d6a8.jpg" /> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls 一向以青春活力的形象展现在观众面前,先后在韩国和美国乐坛都取得了不错的成绩...</p> <a href="#" class="link">查看全文</a> </div> </div> </div> 

 

css 代码:

.main *{ padding:0; margin:0; font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace; box-sizing: content-box; -webkit-box-sizing: content-box; } .main { position: relative; width: 680px; margin: 0 auto; } .view { width: 300px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; -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 .mask{ width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; max-width:100%; } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; } .view p { font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: left; } .view .link { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; font-size: 14px; } .view .link: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .view-tenth img { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .view-tenth .mask { background-color: rgba(249, 179, 255, 0.3); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-tenth h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #333; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-tenth p { color: #333; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .view-tenth .link { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .view-tenth:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-tenth:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover .link { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } 

 

查看效果

 

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css3 技巧——产品列表之鼠标滑过效果(一)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址