动画 CSS 文本下划线答案

【问题标题】：Animated CSS Text Underline动画 CSS 文本下划线
【发布时间】：2020-01-16 08:16:08
【问题描述】：

我创建了这个动画下划线，但底部似乎静止不动，而其他一切都在移动 - 使它看起来“滞后”

我创建了一个代码笔来说明这个问题。你知道为什么会这样吗？

<!DOCTYPE html>
<html>
<body>

<span class="divider-body">
<div class="divider-wave" data-text="dividerdivider"></div>
</span>

</body>
</html>


<style type="text/css">
.divider-body {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0;
    padding: 0;
}


.divider-wave {
    width: 30%;
    height: 10%;
    background: white;
    overflow: hidden;
}

.divider-wave:before {
content: attr(data-text);
position: relative;
top: -42px;
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: underline;
animation: animate 0.5s linear infinite;
}

@keyframes animate 
{
0%
{
    left: 0;
}
100% 
{
    left: -30px;
}
}
</style>

【问题讨论】：

标签： html css animation text-decorations

【解决方案1】：

要解决线路问题（不考虑实际浏览器支持），请尝试使用text-decoration-line: line-through; 属性和值。为了演示，我改变了定位。

.divider-body {
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0;
  padding: 0;
  position: relative;
}

.divider-wave {
  width: 30%;
  height: 10%;
  background: white;
  overflow: hidden;
}

.divider-wave:before {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 4em;
  text-decoration-style: wavy;
  text-decoration-color: #607d8b;
  text-decoration-line: line-through;
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0% {
    left: 0;
  }
  100% {
    left: -30px;
  }
}

<div class="divider-body">
  <span class="divider-wave" data-text="dividerdivider" />
</div>

我还建议交换span 和div，因为span 只能包含短语内容，as described here. 请参阅list of content categories here。

【讨论】：

【解决方案2】：

文字装饰风格：波浪形；没有很大的支持： https://caniuse.com/#search=text%20decoration%20style%20wavy

我建议使用 background-repeat: repeat; 作为背景图片来做这个并为 background-position 属性设置动画。

背景动画会更加平滑。

【讨论】：

【解决方案3】：

简短的检查显示该行向后移动，这导致了问题。这也发生在左侧，但是通过将线移出容器，它不再可见。解决方法很简单；容器的宽度应该是线的长度减去线的移动距离。

width: 1130px;

视觉：https://codepen.io/Toeffe3/pen/MWYqJyz

【讨论】：