Question

我在下面发布的代码片段是两个链接类的线动画，（cta-arrow和cta-alt-arrow）动画在我的testpage中运行正常（参见html代码段）但问题是当我缩放它时当我将其调整到90-75％时，在不同的级别中，每个链接中的线的厚度开始变化，一些是薄的，一些是厚的，它随机地发生在下面的不同链接中。我不确定导致此行为的元素或属性。希望您可以帮助使链接的所有线条动画保持一致。在此先感谢:)（注意，我使用SASS我只是将其转换为CSS）

＆＃13;

a.arrow {
  font-weight: 600;
  line-height: 1.6em;
  font-size: 0.875rem;
  margin-bottom: 1em;
  text-decoration: none;
  display: inline;
  position: relative;
}

a.arrow:before {
  display: block;
  position: absolute;
  content: "";
  height: 1.5px;
  width: 0%;
  -webkit-transition: width 300ms ease;
  -moz-transition: width 300ms ease;
  -o-transition: width 300ms ease;
  transition: width 300ms ease;
  left: 0;
  bottom: -3px;
}

a.arrow:hover:before,
a.arrow:focus:before {
  width: 100%;
}

a.arrow.cta-arrow {
  color: #004dff;
}

a.arrow.cta-arrow:before {
  background: #004dff;
}

a.arrow.cta-alt-arrow {
  color: #000;
}

a.arrow.cta-alt-arrow:before {
  background: #000;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <div>
    <h6>Text Link with Arrow</h6>
    <a class="arrow cta-arrow" href="https://www.google.com" target="_blank">Google</a>
  </div>
  <div>
    <h6>ALT Link with Arrow</h6>
    <a class="arrow cta-alt-arrow" href="https://www.google.com" target="_blank">Google</a>
  </div>

  <div>
    <h6>Text Link with Arrow and ALT Link with Arrow inside Ordered List</h6>
    <ol>
      <li><a class="arrow cta-arrow" href="https://www.google.com" target="_blank">Google</a></li>
      <li><a class="arrow cta-alt-arrow" href="https://www.google.com" target="_blank">Google</a></li>
    </ol>
  </div>

  <div>
    <h6>Text Link with Arrow and ALT Link with Arrow inside Unordered List</h6>
    <ul>
      <li><a class="arrow cta-arrow" href="https://www.google.com" target="_blank">Google</a></li>
      <li><a class="arrow cta-alt-arrow" href="https://www.google.com" target="_blank">Google</a></li>
    </ul>
  </div>

  <div>
    <h6>Text Link with Arrow and ALT Link with Arrow inside Description List</h6>
    <dl>
      <dt><a class="arrow cta-arrow" href="https://www.google.com" target="_blank">Google Title</a></dt>
      <dd><a class="arrow cta-arrow" href="https://www.google.com" target="_blank">Google Description</a></dd>
      <dt><a class="arrow cta-alt-arrow" href="https://www.google.com" target="_blank">Google Title</a></dt>
      <dd><a class="arrow cta-alt-arrow" href="https://www.google.com" target="_blank">Google Description</a></dd>
    </dl>
  </div>

  <div>
    <h6>Text Link with Arrow inside a Paragraph</h6>
    <p><a class="arrow cta-arrow" href="https://www.google.com" target="_blank">Google</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. .</p>
  </div>
  <div>
    <h6>ALT Link with Arrow inside a Paragraph</h6>
    <p><a class="arrow cta-alt-arrow" href="https://www.google.com" target="_blank">Google</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus.</p>
  </div>

  <div>
    <h6>Text Link with Arrow tagged as strong</h6>
    <a class="arrow cta-arrow" href="https://www.google.com" target="_blank"><strong>Google</strong></a>
  </div>
  <div>
    <h6>ALT Link with Arrow tagged as strong</h6>
    <a class="arrow cta-alt-arrow" href="https://www.google.com" target="_blank"><strong>Google</strong></a>
  </div>

</body>

</html>

＆＃13;

线条动画厚度不一致（SASS）

0 个答案: