矩形剪辑中的 CSS3 动画/过渡

Question

我有this jsfiddle 代码，其中，仅使用 css，我尝试在图像上应用剪辑，但没有任何成功。

我尝试放置一个外部 div 并将 clip 应用到包含图像的这个 div，但还是没有成功。

有人知道为什么会这样吗？

遵循CSS代码:

img{
  width:500px;
  height 100px;
  top:10px;
  left:10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,1);

}

#image{
   clip: rect(20px, 20px, 20px 20px);
}

遵循 html 代码:

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

Answer 1

Note: CSS clip property is deprecated and should not be used.

CSS clip属性仅适用于绝对定位的元素，因此您需要定位 #image绝对并应用 clip它(或)定位 img绝对并将剪辑直接应用于它。

要注意的另一件事是提供给 rect 的参数函数指定距框的左上边框边缘的偏移量。因此，值( <top> 、 <right> 、 <bottom> 、 <left> )都应该以形成适当矩形的方式指定。

img {
  position: absolute;
  width: 500px;
  height 100px;
  top: 10px;
  left: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  clip: rect(0px, 20px, 20px, 0px);
}

#image {
  position: relative;
}

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

---

clip属性是可转换/可动画的 rect因此可以实现类似以下代码片段的效果。

img {
  position: absolute;
  width: 500px;
  height 100px;
  top: 10px;
  left: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  clip: rect(0px, 20px, 20px, 0px);
  transition: all 1s;
}

#image {
  position: relative;
}
#image:hover img {
  clip: rect(0px, 50px, 50px, 0px);
}

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>