<!DOCTYPE html> <html> <head> <title>弹出层演示</title> <meta charset="utf-8"> <style type="text/css"> .ts1{ -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; transition:all 0.2s ease-out; } .ts2{ -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } .ts3{ -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; -o-transition:all 0.8s ease-out; -ms-transition:all 0.8s ease-out; transition:all 0.8s ease-out; } .dl1{ -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .dl2{ -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } .dl3{ -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; -ms-transition-delay: 0.8s; transition-delay: 0.8s; } .warp{ word-break: keep-all; white-space: nowrap; } .thum{ display: inline-block; *display: inline; zoom:1; width: 140px; height: 120px; padding: 10px; border: solid 1px #F3F3F3; position: relative; overflow: hidden; } .thum h3{ width: 100%; height: 26px; line-height: 26px; margin: 25px 0; background: #000; color: #fff; } .mask{ width: 100%; height: 100%; position: absolute; left: 0px; top:0px; text-align: center; background-color:#009CDC; } a.preview-btn { width: 60px; height: 22px; line-height: 22px; text-align: center; display: inline-block; text-decoration: none; background: #000; color: #fff; text-transform: lowercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; } /*效果*/ .thum .mask{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .thum:hover .mask{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.85)"; filter: alpha(opacity=0.85); opacity: 0.85; } .thum:hover img{ -webkit-transform: rotate(720deg) scale(0); -moz-transform: rotate(720deg) scale(0); -o-transform: rotate(720deg) scale(0); -ms-transform: rotate(720deg) scale(0); transform: rotate(720deg) scale(0); } .thum h3{ -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); } .thum:hover h3{ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .thum a.preview-btn{ -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); } .thum:hover a.preview-btn{ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } </style> </head> <body> <div class="warp"> <div class="thum"> <img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/> <div class="mask ts3 dl1"> <h3 class="ts1 dl3">示例1</h3> <a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a> </div> </div> <div class="thum"> <img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/> <div class="mask ts3 dl1"> <h3 class="ts1 dl3">示例2</h3> <a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a> </div> </div> <div class="thum"> <img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/> <div class="mask ts3 dl1"> <h3 class="ts1 dl3">示例3</h3> <a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a> </div> </div> </div> </body> </html>