Question

大家好，我对此项目有疑问。比例动画发生时，图片中有晃动。背面可见性未解决问题，请问有没有人可以帮忙？

这是在Codepen中。对不起，英语不好。 https://codepen.io/blackbicoder/pen/QXRaNB

<div class="portfolio__item">
  <div class="portfolio__picture">
    <img src="https://images.pexels.com/photos/2617751/pexels-photo-2617751.jpeg?cs=srgb&dl=beverage-business-coffee-2617751.jpg&fm=jpg" alt="Portfolio image 1" class="portfolio__img">
    <div class="portfolio__overlay">
    </div>
  </div>
</div>

.portfolio__item {
  width: 30rem;
  height: auto;
  overflow: hidden;
  position: relative;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.portfolio__item:hover .portfolio__overlay,
.portfolio__item:focus .portfolio__overlay {
  opacity: 1;
}

.portfolio__item:hover .portfolio__img,
.portfolio__item:focus .portfolio__img {
  transform: scale(1.05);
  filter: blur(2px);
}
.portfolio__picture {
  overflow: hidden;
  border-radius: 2rem;
}
.portfolio__img {
  width: 100%;
  display: block;
  transition: transform 0.3s, filter 0.3s;
  backface-visibility: hidden;
}
.portfolio__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 0.3s;
}

Answer 1

只需在backface-visibility: hidden;

之后使用以下行

-webkit-filter: blur(0);

这几乎可以满足要求。因为这是在另一个过渡中运行的过渡。

.portfolio__item {
  width: 30rem;
  height: auto;
  overflow: hidden;
  position: relative;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.portfolio__item:hover .portfolio__overlay,
.portfolio__item:focus .portfolio__overlay {
  opacity: 1;
}

.portfolio__item:hover .portfolio__img,
.portfolio__item:focus .portfolio__img {
  transform: scale(1.05);
  filter: blur(2px);
}

.portfolio__picture {
  overflow: hidden;
  border-radius: 2rem;
}

.portfolio__img {
  width: 100%;
  display: block;
  transition: transform 0.3s, filter 0.3s;
  backface-visibility: hidden;
  -webkit-filter: blur(0);
}

.portfolio__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 0.3s;
}

<div class="portfolio__item">
  <div class="portfolio__picture">
    <img src="https://images.pexels.com/photos/2617751/pexels-photo-2617751.jpeg?cs=srgb&dl=beverage-business-coffee-2617751.jpg&fm=jpg" alt="Portfolio image 1" class="portfolio__img">
    <div class="portfolio__overlay">
    </div>
  </div>
</div>

如何修复动画抖动

1 个答案: