Question

我尝试在此处查看类似问题的答案，但没有任何方法可以解决我的问题。 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。还有其他简单的解决方案吗？

Answer 1

如果您知道图像的比例或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>

从右到左显示图像的宽度？

1 个答案: