Question

在过去的几天里，我一直在尝试用CSS和SVG来尝试实现这种效果。

我有一个菱形图像，当用户将鼠标悬停在它上面时，它应该变成一个圆圈，理想情况下图像应该变成一个块颜色。

我一开始以为我可以使用SVG做到这一点，我设法让一个SVG钻石变成一个圆圈，但下一步是有一个图像/块颜色，我认为面具可能是要走的路！我得到的最接近的是： http://codepen.io/anon/pen/ByaaqE

HTML

<div>
  <span></span>
  <img src="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" />  
</div>

CSS

div {
    -webkit-clip-path: circle(100px at center);
    -moz-clip-path: circle(100px, 100px, 100px);
    clip-path: circle(100px, 100px, 100px);
    transition: all 0.3s ease;
    width: 200px; height: 300px;
}

div:hover {
    -webkit-clip-path: circle(40px at center);
    -moz-clip-path: circle(40px, 40px, 40px);
    clip-path: circle(40px, 40px, 40px);
}

span {
    display: block;
    width: 200px; height: 300px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    opacity: 0;
    transition: background-color 0.7s ease;
}

div:hover span {
    opacity: 1;
}

我可以为一个圆圈设置动画，但是当我试图将它变成一个矩形时它就不会起作用了（我甚至无法看到钻石的形状！）。

我也尝试过使用纯CSS方法 - 虽然它带有一系列问题。我在img标签上应用了样式，它按照我想要的方式工作，但显然图像是旋转的。当我试图将图像放入div并将图像旋转回正常时，它就会出现问题。当悬停在图像上时，尽管DIV上隐藏了溢出，但它并没有进入圆圈。

http://codepen.io/anon/pen/jEOMem

它还有悬停时没有叠加颜色的问题。

我想知道是否有人曾经设法做过这种效果，如果他们能够对它有所了解，那么我最好的选择是什么，因为我已经没有想法了！

Answer 1

这引起了我的兴趣所以我以为我会有一个bash。

backface-visibility: hidden;是阻止图片溢出其父级的关键，如您的问题所述。

您可以使用伪元素（:before）进行颜色叠加：

/* FIRST EXAMPLE */
.wrap {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  float: left;
  border: 1px solid red;
  margin: 150px 0 0 150px;
  overflow: hidden;
  transition: all 0.3s ease .3s;
  border-radius: 0px;
}
.morph {
  -webkit-transform: rotate(45deg) scale(1.5);
  -moz-transform: rotate(45deg) scale(1.5);
  transform: rotate(45deg) scale(1.5);
  float: left;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.wrap:before {
  content: "";
  background: rgba(207, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.wrap:hover {
  border-radius: 50%;
}

.wrap:hover:before {
  transform: scale(1);
  opacity: 1;
}

<div class="wrap"><img src="http://placekitten.com/g/300/300" class="morph"/>
</div>

如何使钻石形状内的图像变形为圆形

1 个答案: