<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0; padding:0; } body{ background-color:#1b1e24; } .shape{ width:300px; height:300px; position:relative; } .shape .bg { background: #4b5a78; } .shape .bg, .shape .detail{ position:absolute; width:300px; height:300px; vertical-align:middle; text-align:center; display:table-cell; top:0; left:0; opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; display:none; } .shape .detail span.heading{ font-family: 'Roboto Condensed', serif; display:block; margin-top:70px; font-size:30px; color:#fff; text-decoration:none; } .shape .detail p{ font-family:'Abel', sans-serif; color:#fff; font-size:14px; width:70%; margin:0 auto; } .shape .detail .button{ font-family: 'Abel', sans-serif; color:#fff; width:50px; border-radius:20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; text-decoration:none; padding:5px 15px; background: #2f3644; font-size:14px; text-align:center; display:block; margin:0 auto; margin-top:15px; } .shape a.button:hover{ background: #fff; color: #2f3644; } .shape:hover .bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; display:block; } .shape .overlay{ display:block; width:310px; height:310px; position:absolute; top:-5px; left:-5px; transform:scale(1,1); -moz-transform:scale(1,1); -webkit-transform: scale(1,1); transition-duration:0.6s; -moz-transition-duration:0.6s; -webkit-transition-duration:0.6s; pointer-events:none;/*允许鼠标点击穿透后面*/ z-index:500; /*用来去掉伸长的下划线*/ background-repeat:no-repeat; outline:none; transition-timing-function:ease-out; /*动画执行速度效果*/ -webkit-transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; } .shape .overlay.round{ background:url("../image/round.png"); } .shape:hover .overlay{ transform:scale(1.07,1.07); -moz-transform: scale(1.07,1.07); -webkit-transform:scale(1.07,1.07); -o-transform:scale(1.07,1.07); transition-duration:0.3s; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -webkit-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; } .shape:hover .detail{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; display:block; opacity:1; -moz-opacity:1; z-index:450; filter: alpha(opacity=100); } </style> <body> <div> <ul> <li> <div class="shape"> <a href="#" class="overlay round"></a> <div class="detail"> <span class="heading">标题部分</span> <hr /> <p>这是一个特效网站,可以实现图片的遮罩功能,效果不好的话请见谅</p> <a href="" class="button">访问</a> </div> <div class="bg"></div> <div class="base"> <img src="../image/1.jpg"> </div> </div> </li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
鼠标移动图片上遮罩效果
最新推荐文章于 2024-01-18 15:38:53 发布