我正在尝试使用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] 删除。
我来说两句