::after（伪元素）的移动版本模糊内容（动画 CSS 按钮）答案

【问题标题】：Blurry content at ::after (pseudo element) for mobile version (Animated CSS Button)::after（伪元素）的移动版本模糊内容（动画 CSS 按钮）
【发布时间】：2019-07-20 06:15:42
【问题描述】：

我创建了一个号召性用语按钮，在点击时会产生一个小动画：

静态并显示添加到购物车
点击时：背景动画（时长 1 秒）和内容 = '添加到购物车'
1 秒后：新的背景颜色并显示已添加到购物车转到购物车

按钮模板：

基本上，我使用 ::after 将背景颜色更改为进度条，并使用 ::before 将内容更改为 ADDING TO CART。

一切都很完美，但移动版上的 ADDING TO CART 文字模糊。

在桌面和移动设备上打印：

相关代码：

changeBtn() {
  addCartEl.classList.add('global__main-btn--active');
  addCartEl.innerHTML = "Added to cart<span>Go to cart</span>"
}
$('#add-to-cart').on('click', changeBtn());

@keyframes adding {
  0% {
    width: 0%;
    opacity: 1;
  }
  99% {
    width: 99%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}
@keyframes txt-adding {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes added {
  0% {
    color: transparent;
    background-color: #6abf58;
  }
  100% {
    color: #b4dfab;
    background-color: #3f7634;
  }
}
.global__main-btn {
  font-size: 20pt;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background-color: green;
  padding: 1rem 5rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid green;
  border-bottom: 4px solid green;
  margin-bottom: 0.5rem;
  max-width: 450px;
}
.global__main-btn::before {
  content: "";
  background-color: white;
  mask-image: url("../assets/svg/cart-plus-solid.svg");
  position: relative;
  float: left;
  width: 30px;
  height: 27px;
}
.global__main-btn:hover {
  box-shadow: inset 0 0 4rem green;
  cursor: pointer;
}
.global__main-btn--active {
  border: none;
  padding: 0.6rem 5rem;
  position: relative;
  color: transparent;
  animation: added 0.2s 0.8s normal linear forwards;
  min-height: 66px;
}
.global__main-btn--active span {
  display: block;
  font-weight: 300;
  font-size: 12pt;
}
.global__main-btn--active:hover {
  box-shadow: inset 0 0 4rem green;
}
.global__main-btn--active::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: green;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  left: 0;
  mask-image: none;
  animation: adding 1s normal linear forwards;
}
.global__main-btn--active::after {
  content: "Adding to cart";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  color: white;
  animation: txt-adding 1s normal linear forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="buy__btn global__main-btn" id="add-to-cart">Add to cart</button>

【问题讨论】：

在移动版和桌面版的屏幕截图之间也看不到任何模糊的地方..
这可能不是您的问题，但请尝试将* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 添加到您的 SASS 文件的顶部。
@bestinamir 对不起，但我相信图像优化会让一切变得有些模糊。但是在开发环境中看起来就像我故意在移动按钮上所做的那样。
@disinfor 我现在就做了，提高了清晰度，但还不够。还有其他想法吗？
@BraDev，我遇到了类似的问题，并认为它与 transform 属性有关。一旦我添加了转换，文本就变得模糊了。在没有转换的情况下尝试它。如果这也是您的原因，那么您必须找出一种不同的方法来定位文本。

标签： css css-animations pseudo-element

【解决方案1】：

我遇到了类似的问题，并认为它与 transform 属性有关。一旦我添加了转换，文本就变得模糊了。 删除它会解决问题。这似乎是 webkit 或 Blink 引擎的错误。

【讨论】：