And*_*kov 10 javascript css transparency opacity mouse-pointer
我想在网页上有一个图像,它在鼠标悬停时变得透明,但只在最靠近鼠标指针的某个区域透明,用指针移动该区域.
使用CSS可以轻松实现简单的不透明度转换:
<style type="text/css">
img.transparent {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
img.transparent:hover {
opacity: 0;
}
</style>
<img class="transparent" src="1.jpg">
这使得图像在鼠标上很好地消失并且在鼠标上显示出来.
但我想要实现的只是鼠标指针附近某些区域的效果相同.因此,当指针在图像上移动时,指针下总是会有透明区域.
有没有办法用CSS或JS实现这一目标？
谢谢!
如vals所示,使用(任意)掩码.以下是矩形面罩的演示,尽管它可以很容易地修改为您想要的任何形状.此版本适用于Firefox和Chromium的最新版本,并允许通过SVG元素创建更复杂的形状.
请注意,这是非常糟糕的代码.如果您希望在任何项目中使用它,则需要编写,但这个想法就在那里.
演示:http://jsfiddle.net/WK_of_Angmar/f8oe7hcq/
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
window.addEventListener("load", function() {
var img = document.getElementsByTagName("image")[0];
var imgPos = img.getBoundingClientRect();
var imgX = imgPos.left;
var imgY = imgPos.top;
var rect = document.getElementsByTagName("rect")[1];
var rectHalfWidth = rect.getAttribute("width") / 2;
var rectHalfHeight = rect.getAttribute("height") / 2;
img.addEventListener("mousemove", function(e) {
rect.setAttribute("x", e.clientX - imgX - rectHalfWidth);
rect.setAttribute("y", e.clientY - imgY - rectHalfHeight);
}, false);
}, false);
</script>
<style>
svg {
width: 320px;
height: 166px;
}
body {
background-color: red;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Mozilla_Firefox_logo_2013.svg/226px-Mozilla_Firefox_logo_2013.svg.png");
}
image:hover {
mask: url("#cursorMask");
}
</style>
</head>
<body>
<svg>
<defs>
<mask id="cursorMask" maskUnits="objectBoundingBox" maskContentUtils="objectBoundingBox">
<g>
<!-- the SECOND rect element is what determines the transparent area -->
<rect x="0" y="0" width="320" height="166" fill="#FFFFFF" />
<rect x="0" y="0" width="100" height="100" fill="#000000" />
</g>
</mask>
</defs>
<image width="320" height="166" xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d4/Firefox-33-xfce.png" />
</svg>
</body>
</html>