gpt4 book ai didi

css - 动画 CSS 剪辑

转载 作者:技术小花猫 更新时间:2023-10-29 11:05:46 30 4
gpt4 key购买 nike

我正在尝试使用 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

最佳答案

您的代码运行良好。你只需要给它正确的“开始”值,就像这样:

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">

关于css - 动画 CSS 剪辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21056199/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com