主页 / 问题 / 1082832
Accepted
Сергей Александров
Asked:2020-02-15 09:19:09 +0000 UTC2020-02-15 09:19:09 +0000 UTC

图像从左到右的平滑外观

  • 772

现在整个画面平滑出现了如何让它从左到右平滑出现，也就是右边的部分如何先完全变暗，左边的动画如何平滑出现对。

#slide {
  animation: ani10601 5s linear infinite;
  opacity: 0.2;
}

@keyframes ani10601 {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
<!-- partial:index.partial.html -->

<img id="slide" src="https://cdn.pixabay.com/photo/2019/08/26/06/40/table-mountain-4430922_960_720.jpg" />

<!-- partial -->

html

1 个回答

  1. Best Answer

    所以它看起来

    或者这个：https ://ru.stackoverflow.com/a/467978/308951

    img{
  display: block;
  width: 100%;
  height: 100%;
object-fit: cover
}

.elem{
  overflow: hidden;
  width: 0;
  height: 480px;
  animation: anim 1s linear forwards;
}

@keyframes anim{
  50%{
    opacity: 0;
    width: 0;
  }
  100%{
    opacity: 1;
    width: 640px;
  }
}
    <div class="elem">
  <img id="slide" src="https://cdn.pixabay.com/photo/2019/08/26/06/40/table-mountain-4430922_960_720.jpg" />
</div>

    • 3

相关问题