动画 CSS 文本下划线

Question

I have created this animated underline, but the bottom seems to sit still whilst everything else moves - making it look "laggy"我创建了这个动画下划线，但底部似乎静止不动，而其他一切都在移动 - 使它看起来“滞后”

I created a codepen to illustrate the issue.我创建了一个代码笔来说明这个问题。 Do you have any idea why is this happening?你知道为什么会这样吗？

Codepen for illustration用于说明的 Codepen

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

To fix the line issue (without regard to actual browser support), try to use the text-decoration-line: line-through;要解决线路问题（不考虑实际浏览器支持），请尝试使用text-decoration-line: line-through; property and value.财产和价值。 I changed the positioning for demonstration purpose.为了演示目的，我改变了定位。

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

I would also suggest swapping the span and div , since a span can only contain phrasing content, as described here.我还建议交换span和div ，因为span只能包含短语内容，如此处所述。 See a list of content categories here . 在此处查看内容类别列表。

Answer 2

The text-decoration-style: wavy; text-decoration-style: 波浪形； doesn't have great support: https://caniuse.com/#search=text%20decoration%20style%20wavy没有很好的支持： https : //caniuse.com/#search=text%20decoration%20style%20wavy

I'd suggest doing this as a background image with background-repeat: repeat;我建议将其作为背景图像使用 background-repeat: repeat; and animate the background-position property.并为 background-position 属性设置动画。

Backgrounds will animate a lot smoother.背景动画会更流畅。

Answer 3

A short inspect shows that the line is moved back, which causes the problem.简短的检查显示该行向后移动，这会导致问题。 This happens on the left side as well, but by moving the line out of the container, it is no longer visible.这也发生在左侧，但通过将线移出容器，它不再可见。 The solution is simple;解决方法很简单； the width of the container should be the length of the line minus the moving distance of the line.容器的宽度应该是线的长度减去线的移动距离。

width: 1130px;

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

动画 CSS 文本下划线

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-01-16 09:09:50

解决方案2
0 2020-01-16 08:49:54

解决方案3
0 2020-01-16 08:50:44

动画 CSS 文本下划线

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-01-16 09:09:50

解决方案2 0 2020-01-16 08:49:54

解决方案3 0 2020-01-16 08:50:44

解决方案1
1 已采纳 2020-01-16 09:09:50

解决方案2
0 2020-01-16 08:49:54

解决方案3
0 2020-01-16 08:50:44