我試圖讓文本裝飾從左到右出現，就好像它被筆劃掉了一樣。
有沒有辦法在不更改其背后的文本的情況下做到這一點？
提前致謝！
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>uj5u.com熱心網友回復：
如果您愿意接受使用直線作為洗掉線（而不是取決于字體自己的洗掉線樣式），那么只需在<h1>元素頂部覆寫一個 div 并將其 100% 偏移到一邊使用transform: translateX(-100%). 我們給它一個頂部邊框，其寬度取決于字體大小（即使用em單位），以及一個顏色，其值取決于當前字體顏色（即使用currentColor）。
您可以使用 CSS 過渡設定此行條目的持續時間和緩動功能。添加類時.strikethrough，偏移量簡單地設定為transform: translateX(0).
需要注意的是，此技巧僅適用于不間斷行。如果您的 h1 元素將跨多行呈現，那么它將不起作用。
請參閱下面的概念驗證示例：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/440963.html
標籤：javascript html css 动画 关键帧
下一篇：在圓形旋轉div上對齊影像