svg 或 css3 的圆形遮罩效果

Question

我想通过使用 jQuery 实现这种效果，它可以缩放，但我没有做到这一点，请给我提供 fiddle 的答案，只有一张图片。

Answer 1

我想这可能对你有帮助。

基于CSS3：

.trans {
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.test_outer {
    display: block;
    width: 512px;
    height: 381px;
    margin: 1em auto;
    position: relative;
    overflow: hidden;
}
.test_cover {
    width: 100px;
    height: 100px;
    border: 512px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    position: absolute;
    left: -325px;
    top: -465px;
}
.test_cover:hover {
    width: 150px;
    height: 150px;
    left: -350px;
    top: -490px;
}
.test_cover:hover:after {
    content: "Look at me~";
    margin: 50px 0 0 -30px;
    color: #fff;
    font: bold 20px/1.2 'Lucida Console';
    text-shadow: 1px 1px rgba(0, 0, 0, .35);
    position: absolute;
}

<a href="#" class="test_outer">
    <span class="test_cover trans"></span>
    <img src="http://i.stack.imgur.com/e5sjf.jpg" width="512" height="381" border="0" />  
</a>

==>> jsfiddle

Answer 2

您可以使用 pseudo 元素添加叠加层，使用 box-shadow 元素提供 border

演示 -http://jsfiddle.net/mhm8sxph/

div {
  width: 300px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
div img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
div:hover:before {
  width: 130px;
  height: 130px;
}
div:before {
  content: '';
  position: absolute;
  background: transparent;
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 0px 5px grey, 0px 0px 0px 160px rgba(231, 231, 231, 0.75);
  width: 80px;
  border-radius: 50%;
  height: 80px;
  transform: translate(-50%, -50%);
  transition: .5s linear;
}

<div>
  <img src="http://placeimg.com/300/200/people" border="0" />
</div>

Answer 3

您可以简单地创建一个 mask，将其应用于 image 并根据鼠标位置使用 JavaScript.

var im = document.getElementById('im');
im.addEventListener('mousemove', function(e) {
  document.getElementById('c').setAttribute('cx', e.clientX - im.getBoundingClientRect().left);
  document.getElementById('c').setAttribute('cy', e.clientY - im.getBoundingClientRect().top);
})

<svg id="im" width="400" height="400">
  <defs>
    <circle id="c" cx="200" cy="200" r="50" />
    <mask id="m" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse">
      <rect width="400" height="400" fill="#555" />
      <use xlink:href="#c" fill="#fff" stroke="black" stroke-width="5" />
    </mask>
  </defs>
  <use xlink:href="#c" stroke="#777" stroke-width="5" fill="none" />
  <image mask="url(#m)" width="400" height="400" xlink:href="http://www.lorempixel.com/400/400" />
</svg>

svg 或 css3 的圆形遮罩效果

Circular masking effect with svg or css3

javascript

css

svg

css-shapes