相关疑难解决方法(0)

我试图在边界上悬停时扩展的边界上获得过渡悬停效果.

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: left 250ms ease-in-out, right 250ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}

<h1>CSS IS AWESOME</h1>

我在Jsfiddle上尝试过这个

我试图用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; 
    }