大佬教程收集整理的这篇文章主要介绍了jquery – CSS滤镜模糊:在CSS过渡期间防止模糊图像上的未定义图像边缘,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
测试中:
> Firefox 37:效果很棒!
> Chrome 42:图像和边框所在的位置
父元素满足图像闪烁/模糊/未定义
> IE9:没那么多……
看看我的例子:Codepen
HTML:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'> <div class="container"> <img class="blur" src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/> </div> <div class="col"> <h2 class="montserrat">Hover Over Image</h2> <hr> <p class="hind">PrevenTing an image from having undefined blurry edges can be achieved by adding negative margin,but during a CSS transition this fails. As you can see,on-hover,the edges of the image become undefined/blurred. How can you keep the edges of an image defined during a CSS transition while applying or removing filter blur?<br><br>Hover over the image!</p> </div>
CSS:
html,body{ margin:0; text-align:center; BACkground:#F8F8F8; height:100%; } h2{ margin:1em 0; padding:0; line-height:1; color:#111; } p{ margin:1em 0; padding:0; line-height:1; text-align:justify; color:#999; } .montserrat{ font-family: 'Montserrat',sans-serif; } .hind{ font-family: 'Hind',sans-serif; } hr { width:100%; display: block; height: 1px; border: 0; border-top: 1px solid #222; margin: 1em 0; padding: 0; line-height:0; } .col{ max-width:400px; display:inline-block; height:100%; float:left; BACkground:#333; padding-left:20px; padding-right:20px; } .container{ top: 50%; left: 50%; transform: translate(-50%,-50%); width:10%; display:inline-block; padding-top:10%; position:absolute; overflow:hidden !important; border-radius:50%; -webkit-filter: blur(0pX); -moz-filter: blur(0pX); -o-filter: blur(0pX); -ms-filter: blur(0pX); filter: blur(0pX);/*prevents image from overflowing*/ } .container img{ position:absolute; min-width:calc(100% + 30pX); height:calc(100% + 30pX); left:-15px; right:-15px; top:-15px; bottom:-15px; -webkit-transition: .5s ease-in-out; } .blur{ -webkit-filter: blur(5pX); -moz-filter: blur(5pX); -o-filter: blur(5pX); -ms-filter: blur(5pX); filter: blur(5pX); }
只是一个微笑的jQuery:
$(document).ready(function(){ $('img').hover(function(){ $(this).toggleClass('blur'); }); });
以上是大佬教程为你收集整理的jquery – CSS滤镜模糊:在CSS过渡期间防止模糊图像上的未定义图像边缘全部内容,希望文章能够帮你解决jquery – CSS滤镜模糊:在CSS过渡期间防止模糊图像上的未定义图像边缘所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。