我正试图像这里的效果一样制作一个删除线动画：
打击线从左到右显示,从左到右消失.
@keyframes strike {
0% {
width: 0;
}
50% {
width: 100%;
}
100% {
width: 0;
}
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: strike;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: fill;
animation-direction: normal;
}
<div> The text in the span <span class="strike">is what I want to strike out</span>. </div>
有没有办法只用CSS实现？
解决方法
您可以在关键帧动画中使用变换和变换原点从左到右制作透视圆形,并从左到右旋转.
关键是将X轴上的伪元素缩放为0到1,左边是变换原点,然后是右边的变换原点返回0(类似于这个 hover effect,参见答案的最后一个例子).
关键是将X轴上的伪元素缩放为0到1,左边是变换原点,然后是右边的变换原点返回0(类似于这个 hover effect,参见答案的最后一个例子).
以下是您的标记示例：
@keyframes strike{
0% { transform-origin: 0% 50%;transform:scaleX(0); }
50% { transform-origin: 0% 50%;transform:scaleX(1); }
50.01% { transform-origin:100% 50%;transform:scaleX(1); }
100% { transform-origin:100% 50%;transform:scaleX(0); }
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation: strike .75s ease-in-out forwards;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
