Question

创建一个卡行，当每张卡悬停在该行上时，它们的缩放比例为1.05倍。有关缩放的所有操作均正常且流畅，但是真正令我困扰的一件事是图像和文本在缩放时如何失焦，然后在缩放后重新获得焦点。很难演示，但是我已经在Chrome，Firefox和Edge中进行了尝试，以防浏览器出现问题（某种程度上在Edge中甚至更糟），但是我想知道是否有一种解决方法，因为它确实破坏了外观。

HTML代码：

<div class="col-md-3 article">
            <a href="">
              <div class="card">
                <img class="card-img-top" src="images/xchurch.jpg" alt="Card image">
                <div class="card-body">
                  <h4 class="card-title">John Doe</h4>
                  <p class="card-text">Some example text.</p>
                </div>
              </div>
            </a>
          </div>

CSS代码：

.article {
  transition: .5s;
}
.article a {
  text-decoration: none;
  color: #000;
}
.article a:hover {
  text-decoration: none;
  color: #000;
}
.article:hover {
  transform: scale(1.05);
}

Answer 1

我找到了解决此问题的几种方法。处理缩放过程中失真的最佳方法如下。但是，缩放后会留下一些失真。

.article {
  transition: .5s;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}
.article a {
  text-decoration: none;
  color: #000;
}
.article a:hover {
  text-decoration: none;
  color: #000;
}
.article:hover {
  transform: perspective(1px) scale(1.05);
}

如果您确实无法产生任何失真，则可以通过单独更改属性来模仿缩放。我为这种情况构建了一个简单的解决方法，但您可能需要对其进行优化以适合您的需求。

.article {
  transition: .5s;
  margin: 10px 0 0 5px;
}
.article:hover {
  max-width: calc(25% + 10px);
  margin: 0;
}
.article a {
  text-decoration: none;
  color: #000;
}
.article:hover a {
  text-decoration: none;
  color: #000;
}
.article h4, .article p {
  transition: .5s;
}
.article:hover h4 {
  font-size: 1.61rem;
}
.article:hover p {
  font-size: 1.07rem;
}

希望这些对您有所帮助。

使用CSS缩放比例时如何解决图像和文本的失真？

1 个答案: