Javascript svg或css3的圆形掩蔽效果

---

我希望通过使用可伸缩的jQuery获得这种效果，但我没有做到这一点。请仅用一张图片向我提供答案。

我认为这可能会对您有所帮助

基于CSS3：

.trans{
-webkit转换：0.3s易用性；
-moz转换：0.3s易用性；
-ms转换：0.3s；
-o过渡：0.3s；
过渡：0.3s；
}
.测试{
显示：块；
宽度：512px；
身高：381px；
保证金：1em自动；
位置：相对位置；
溢出：隐藏；
}
.测试盖{
宽度：100px；
高度：100px；
边框：512px实心rgba（0,0,0,35）；
边界半径：50%；
位置：绝对位置；
左：-325px；
顶部：-465px；
}
.测试盖：悬停{
宽度：150px；
高度：150像素；
左：-350px；
顶部：-490px；
}
.测试覆盖：悬停：之后{
内容：“看着我~”；
利润率：50像素0-30像素；
颜色：#fff；
字体：粗体20px/1.2“Lucida控制台”；
文本阴影：1px1pRGBA（0,0,0,35）；
位置：绝对位置；
}

---

您可以使用

伪

元素添加覆盖，使用

框阴影

给出

边框

演示-

div{
宽度：300px；
边框：1px纯黑；
位置：相对位置；
溢出：隐藏；
}
部门经理{
宽度：100%；
高度：自动；
垂直对齐：中间对齐；
}
div:悬停：之前{
宽度：130px；
高度：130像素；
}
部门：以前{
内容：''；
位置：绝对位置；
背景：透明；
最高：50%；
左：50%；
盒影：0px 0px 0px 5px灰色，0px 0px 0px 160px rgba（2312312310.75）；
宽度：80px；
边界半径：50%；
高度：80px；
转换：翻译（-50%，-50%）；
过渡：5s线性；
}

---

您只需创建一个

遮罩，将其应用于
图像
，并使用JavaScript根据鼠标位置更改
圆圈
的
cx
和
cy
属性


var im=document.getElementById（'im'）；
im.addEventListener（'mousemove'，函数（e）{
document.getElementById（'c'）.setAttribute（'cx'，e.clientX-im.getBoundingClientRect（）.left）；
document.getElementById（'c'）.setAttribute（'cy'，e.clientY-im.getBoundingClientRect（）.top）；
})

谢谢，很好的解决办法是用鼠标指针移动这个圆圈谢谢邀请@Harry:）谢谢@vitorino fernandes能得到我需要的东西真是太好了