Question

我正在尝试使用CSS在一些文本上制作一条直线，但它实际上并不是动画，只是从隐藏到显示。任何人都可以建议我尝试的是否真的可行吗？如果没有，还有另一种方法可以达到这个目的吗？ HTML：

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

CSS：

@keyframes strike{
                from{text-decoration: none;}
                to{text-decoration: line-through;}
            }
 .strike{  
    -webkit-animation-name: strike; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: strike;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; 
    }

Answer 1

你可以像这样使用伪

@keyframes strike{
  0%   { width : 0; }
  100% { width: 100%; }
}
.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Answer 2

这取决于你想要如何制作动画。

由于text-decoration-color是可动画的，因此您可以将其设置为transparent到auto的动画。

但是这个属性还没有被广泛支持。

@keyframes strike {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: auto; }
}
.strike {  
  text-decoration: line-through;
  animation: strike 4s linear;
}

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Answer 3

这是accepted答案的一种变体，它使用图像来提供动画的“涂鸦”删除线。

html {
  font-family: Helvetica;
  font-size: 24px;
}
.strike { position:relative; }
.strike::after {
  content:' ';
  position:absolute;
  top:50%; left:-3%;
  width:0; height:10px;
  opacity:80%;
  transform:translateY(-50%);
  background:repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKAQMAAAByjsdvAAAABlBMVEUAAADdMzNrjRuKAAAAAXRSTlMAQObYZgAAADdJREFUCNdj+MMABP8ZGCQY/h9g+MHw/AHzDwbGD+w/GBhq6h8wMNj/b2BgkP8HVMMPUsn+gQEAsTkQNRVnI4cAAAAASUVORK5CYII=);
  animation: strike 2s linear .3s 1 forwards;
}
@keyframes strike { to { width: 106%; } }

This thing and <span class="strike">this thing and</span> this thing.

Answer 4

根据W3Schools，text-decoration属性不可动画。

但是，如果你使用jQuery，你可以。（见here）

是否可以通过文本修饰动画CSS线？

4 个答案: