我想通过动画创建一条简单的线，到目前为止，我在这里：
.strikethrough {
display: inline-block;
position: relative;
line-height: 1.5em;
}
.strikethrough:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 1px;
box-shadow: 0 1px rgba(252, 3, 3,0.7);
margin-top: -0.7em;
background: rgba(252, 3, 3,0.8);
transform-origin: center left;
animation: strikethrough 1s 0.5s cubic-bezier(.55, 0, .1, 1) 1;
}
@keyframes strikethrough {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}<span class="strikethrough">Favor packaging over toy</span>如您所见，除以下两点外，其他所有功能均正常运行：
现在我们可以先看到线条，然后隐藏并开始动画，我只想看动画线条。
我想使用javascript来启动动画...但是使用此伪元素（之后）似乎很复杂！
您可以使用animation-fill-mode以下方法修复动画：
animation-fill-mode: backwards;
要触发动画，只需添加删除线类。我认为这行不通的地方是当您有多行文字时，因为您::after将无法覆盖该内容。
document.querySelector( '.strikethrough' ).addEventListener( 'click', event => { event.target.classList.toggle( 'strikethrough' ); });.strikethrough {
display: inline-block;
position: relative;
line-height: 1.5em;
}
.strikethrough:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 1px;
box-shadow: 0 1px rgba(252, 3, 3,0.7);
margin-top: -0.7em;
background: rgba(252, 3, 3,0.8);
transform-origin: center left;
animation: strikethrough 1s 0.5s cubic-bezier(.55, 0, .1, 1) 1;
animation-fill-mode: backwards;
}
@keyframes strikethrough {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}<span class="strikethrough">Favor packaging over toy</span>就我个人而言，我将采用这种更简单的方法，通过使用背景图像缩放来减少屏幕上实际对象的数量以及代码的数量。如果设置巧妙，您甚至可以对它进行多行处理（通过将背景设置为行高并在其中包含一个中间像素，而使用SVG，您可以确保其大小仅为1像素，而不考虑拉伸等）。
document.querySelector( 'p' ).addEventListener( 'click', event => {
event.target.classList.toggle( 'strikethrough' );
})@keyframes stretch {
to { background-size: 100% var(--line-height); }
}
:root {
--line-height: 1.2em;
}
p {
line-height: var(--line-height);
}
.strikethrough {
line-height: 1.2em;
background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><line x1="0" y1="50%" x2="100%" y2="50%" stroke="black" stroke-width="1px" /></svg>') repeat-y 0 0 / 0 var(--line-height);
animation: stretch 4s;
animation-fill-mode: forwards;
}<p>Hello World!<br />Another line, does it work?</p>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句