Question

主要思想是获取Canva网站主页的UI设计。这是链接：https://www.canva.com/en_in/

我遵循的步骤：

我发现无法模糊背景图片，所以我在<div>中插入了一个id =“background”的图像。

然后将其修改为：

#background{
  position:absolute; 
  top:0;
  left:0;
  z-index:-1;
}

现在我将模糊图像，以便当我将鼠标悬停在它上面时，该特定部分会变得清晰。
显然，当我将鼠标悬停在它上面时，整个图像都会清晰。
但目标是清除鼠标指针所在的区域。
我想，我们应该使用Mouse事件ClientX属性来获取鼠标指针的位置并清除该特定的坐标。
但我对如何编码感到茫然。

Answer 1

https://github.com/thdoan/magnify

一种简单的方法是使用放大来缩放已经模糊的图像。

＆＃13;

$(document).ready(function() {
  $('.zoom').magnify();
});

＆＃13;

img {
 -webkit-filter: blur(10px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>


<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">

＆＃13;

Answer 2

这是一个纯粹的JS解决方案，它依赖于clip-path和CSS变量，我们的想法是复制图像，使其中一个模糊，一个不模糊。然后我们在顶部揭示非模糊的一个：

＆＃13;

var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();

document.body.onmousemove = function(e) {
  /*Adjust the clip-path*/
  image.style.setProperty('--x',(e.clientX-p.top)+'px');
  image.style.setProperty('--y',(e.clientY-p.left)+'px');
}

＆＃13;

.blur {
  display:inline-block;
  width:400px;
  height:200px;
  position:relative;
}
.blur:before,
.blur:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--i);
}
.blur:before {
  filter:blur(5px) grayscale(60%);
}
.blur:after {
  clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}

＆＃13;

<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">

</div>

＆＃13;

使用此解决方案，如果您想在悬停时模糊图像的一部分，您可以轻松地完成对象：

＆＃13;

var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();

document.body.onmousemove = function(e) {
  /*Adjust the clip-path*/
  image.style.setProperty('--x',(e.clientX-p.top)+'px');
  image.style.setProperty('--y',(e.clientY-p.left)+'px');
}

＆＃13;

.blur {
  display:inline-block;
  margin:50px;
  width:200px;
  height:200px;
  position:relative;
}
.blur:before,
.blur:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--i);
}
.blur:after {
  filter:blur(5px);
}
.blur:after {
  clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}

＆＃13;

<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">

</div>

＆＃13;

如何在HTML中模糊图像的特定区域？

2 个答案: