jquery – CSS滤镜模糊:在CSS过渡期间防止模糊图像上的未定义图像边缘

前端之家收集整理的这篇文章主要介绍了jquery – CSS滤镜模糊:在CSS过渡期间防止模糊图像上的未定义图像边缘前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

可以通过添加负边距来防止图像具有未定义的模糊边缘,但是在CSS转换期间,这会失败.在添加删除过滤器模糊类时,如何保持CSS过渡期间定义的图像边缘?

测试中:

> Firefox 37:效果很棒!
> Chrome 42:图像和边框所在的位置
父元素满足图像闪烁/模糊/未定义
> IE9:没那么多……

看看我的例子:Codepen

HTML:

CSS:

  1. html,body{
  2. margin:0;
  3. text-align:center;
  4. background:#F8F8F8;
  5. height:100%;
  6. }
  7. h2{
  8. margin:1em 0;
  9. padding:0;
  10. line-height:1;
  11. color:#111;
  12. }
  13. p{
  14. margin:1em 0;
  15. padding:0;
  16. line-height:1;
  17. text-align:justify;
  18. color:#999;
  19. }
  20. .montserrat{
  21. font-family: 'Montserrat',sans-serif;
  22. }
  23. .hind{
  24. font-family: 'Hind',sans-serif;
  25. }
  26. hr {
  27. width:100%;
  28. display: block;
  29. height: 1px;
  30. border: 0;
  31. border-top: 1px solid #222;
  32. margin: 1em 0;
  33. padding: 0;
  34. line-height:0;
  35. }
  36. .col{
  37. max-width:400px;
  38. display:inline-block;
  39. height:100%;
  40. float:left;
  41. background:#333;
  42. padding-left:20px;
  43. padding-right:20px;
  44. }
  45. .container{
  46. top: 50%;
  47. left: 50%;
  48. transform: translate(-50%,-50%);
  49. width:10%;
  50. display:inline-block;
  51. padding-top:10%;
  52. position:absolute;
  53. overflow:hidden !important;
  54. border-radius:50%;
  55. -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);/*prevents image from overflowing*/
  56. }
  57. .container img{
  58. position:absolute;
  59. min-width:calc(100% + 30px);
  60. height:calc(100% + 30px);
  61. left:-15px;
  62. right:-15px;
  63. top:-15px;
  64. bottom:-15px;
  65. -webkit-transition: .5s ease-in-out;
  66. }
  67. .blur{
  68. -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
  69. }

只是一个微笑的jQuery:

  1. $(document).ready(function(){
  2. $('img').hover(function(){
  3. $(this).toggleClass('blur');
  4. });
  5. });
最佳答案
当应用于处于HW加速模式的内容时,图像上的过滤器(以及一些动画和过渡)具有更好的结果.尝试强制浏览器使用该模式,最简单的方法是使用一些3d变换:

  1. .container img{
  2. transform: translateZ(0.1px)
  3. }

见:http://codepen.io/ondrakoupil/pen/GJpaJo
现在很流畅(OS X上的Chrome 39)

猜你在找的CSS相关文章