是否可以为删除线设置动画？ CSS / JS

Question

我想让文字装饰从左到右出现，就像用钢笔划掉一样。

有没有一种方法可以在不更改后面的文字的情况下做到这一点？

提前致谢！

document.querySelector('h1').addEventListener('click', (e) => {
e.target.classList.toggle('strikethrough')
})

.strikethrough {
    text-decoration: line-through;
    text-decoration-style: wavy;
    text-decoration-thickness: 15%;
    animation: strike 3s linear;
}


@keyframes strike {
    0% {width: 0;}
    100% {width: 100%;}
}

<h1>CROSS ME OUT</h1>

Answer 1

如果您愿意接受使用直线作为删除线（而不是依赖于字体自己的删除线样式），那么只需在 <h1> 元素并使用 transform: translateX(-100%) 将其 100% 偏移到一侧。我们给它一个顶部边框，其宽度取决于 font-size（即使用 em 单位），以及其值取决于当前字体颜色的颜色（即使用 currentColor）。

您可以使用CSS transitions 设置该行入口的持续时间和缓动功能。添加 .strikethrough class 时，偏移量简单地设置为 transform: translateX(0).

需要注意的是，此技巧仅适用于 non-breaking 行。如果您的 h1 元素将跨多行呈现，那么它将不起作用。

参见下面的 proof-of-concept 示例：

document.querySelector('h1').addEventListener('click', (e) => {
e.target.classList.toggle('strikethrough')
});

h1 {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

h1::after {
  position: absolute;
  top: calc(50% - 0.05em);
  left: 0;
  width: 100%;
  content: '';
  display: block;
  border-top: 0.1em solid currentColor;
  transform: translateX(-100%);
  transition: transform .25s ease-in-out;
}

h1.strikethrough::after {
  transform: translateX(0);
}

<h1>CROSS ME OUT</h1>

是否可以为删除线设置动画？ CSS / JS

Is it possible to animate a strikethrough? CSS / JS

html

javascript

css

animation

keyframe