CSS动画镶边

Question

在铬中，动画看起来滞后，而在野生动物园中则没有问题。但是还有一个问题，由于某些原因下边框并不总是适合，因此在gif上也可以看到。

body {
  background: black
}

.button {
  padding: 1px;
  margin: 20px auto;
  display: table;
  overflow: hidden;
}

button {
  color: white;
  border: none;
  background: black;
  position: relative;
  padding: 10px 20px;
}

button:before, button:after {
  content: '';
  position: absolute;
  display: block;
  width: 50%;
  z-index: -1;
  height: 50%;
  transition: 2s ease;
}

button:before {
  bottom: -1px;
  left: -1px;
  background: radial-gradient(ellipse at 0 100%, white 0%, transparent 80%);
}

button:after {
  top: -1px;
  right: -1px;
  background: radial-gradient(ellipse at 100% 0, white 0%, transparent 80%);
}

button:hover:after, button:hover:before {
  width: 200%;
  height: 200%;
}

   
<div class="button">
    <button>Submit</button>
</div>

Answer 1

这是图形问题

这是图形渲染的问题。您可以尝试通过优化chrome和计算机来改善浏览器的图形渲染效果。

1. 确保所有驱动程序都是最新的
2. 确保您的应用程序是最新的
3. 关闭不必要的标签和窗口
4. 卸载浏览器插件/扩展

硬件Acceleration实验

  

内置于Chrome的设置中可以启用硬件加速，   这可能会或可能不会改善您计算机上Chrome的性能。   硬件加速使CPU可以减轻某些页面渲染的负担   并将任务加载到系统的GPU。

     

关于硬件加速是有利还是有害有一些争论   性能。我没有发现它有任何作用，但也许会   帮助您的系统更有效地运行Chrome。另外，值得   正在调查以查看是否启用了硬件加速。

     

  
• 要找到设置，请单击三点菜单按钮，然后选择   设置。
  
• 向下滚动到“设置”页面的底部，然后单击   显示高级设置。
  
• 向下滚动到“系统”部分并检查   （或取消选中）“使用​​硬件加速”框（如果可用）。
  
• 重新启动Chrome。
  

     

同样，您的续航里程可能会因硬件加速而有所不同，但是值得一试，看看是否有更好的选择。

点击“重置”按钮

  

如果其他所有方法均失败，则可以重置Chrome并将浏览器返回到   默认设置。重置Chrome不会清除所有内容；您的   书签，浏览历史记录和保存的密码不会重置。什么   您将无法重置Chrome，因为它是您的起始页，新标签页，   固定标签和默认搜索引擎（如果不是Google的话）。

     

“重置”按钮位于硬件加速设置的正下方   在高级设置页面上。单击重置设置按钮，然后   然后点击重置以确认您的意图。