我正在尝试使用CSS3过渡为CSS设置动画clip
而没有成功。图像只是剪辑而没有过渡。
我想念什么?
#clipped {
position:absolute;
width: auto;
clip: rect(100, 100, 100, 100);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#clipped:hover {
clip: rect(50px, 200px, 200px, 0);
}
您的代码可以正常工作。您只需要给它正确的“开始”值即可,如下所示:
img {
position: absolute;
display: block;
clip: rect(10px, 100px, 200px, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
img:hover {
clip: rect(80px, 200px, 250px, 50px);
}
<img src="http://i.stack.imgur.com/Wr86X.jpg">
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句