问题描述
我尝试在此处查看类似问题的答案,但没有任何方法可以解决我的问题。
Quarter of a circle
我想从右到左增加图像的宽度。我已按照此处的建议尝试过position absolute:0
和right:0
,但无济于事。宽度似乎从右向左增加,但图像的左侧首先显示。
我想做的是增加图像右侧的宽度或底部的高度,所以看起来这条线应该向上。
我设法使用如下的剪切路径获得了想要的动画:
@keyframes circleanim3 {
0%{
clip-path: inset(100% 0% 0% 0%);
}
100%{
clip-path: inset(0% 0% 0% 0%);
}
不幸的是,edge或safari中似乎不支持clip-path。还有其他简单的解决方案吗?
解决方法
如果您知道图像的比例或height
和width
的比例,则可以使用object-fit和object-position css属性:
:root {
--img-width: 600px;
--img-height: 337px;
}
.container {
display: flex;
justify-content: flex-end;
}
img {
object-fit: cover;
object-position: 100% 0;
width: 0;
height: var(--img-height);
animation: rightToLeft 2s infinite;
}
@keyframes rightToLeft {
0% {
width: 0;
}
100% {
width: var(--img-width);
}
}
<div class='container'>
<img src='https://d33wubrfki0l68.cloudfront.net/a9c7e461090fc25097e6391a5bb823b0f28ba008/1672b/images/css/object-fit/example-object-fit.jpg' class='alligator-turtle' />
</div>