动画 CSS 文本下划线

Question

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

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

<!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>

Answer 1

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

我建议将其作为背景图片使用 background-repeat: repeat;并为背景位置设置动画属性.

背景动画会更加流畅。

Answer 2

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

width: 1130px;

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

Answer 3

要解决线路问题（不考虑实际浏览器支持），请尝试使用 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. See a list of content categories here.

动画 CSS 文本下划线

Animated CSS Text Underline

html

css

animation

text-decorations