我正在尝试使用 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);
}
Fiddle http://jsfiddle.net/66CFD/
你的代码工作得很好。您只需给它正确的“起始”值，如下所示：
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="https://i.stack.imgur.com/Wr86X.jpg">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
