我正在制作一个按钮悬停效果，当你悬停时，单个角色会翻转起来.这几乎是完美的，但不知何故，它消除了单词之间的空格，所以按钮现在显示的是‘Thisisat ext’，而不是‘This is a Text’，我try 了很多方法，但似乎找不到正确的解决方案:
演示:
https://codepen.io/pixelarchitect/pen/mdQXjgx个
SCSS:
.btn-text {
transform: translateY(var(--y)) translateZ(0);
transition: transform 0.3s ease;
div {
display: flex;
overflow: hidden;
text-shadow: 0 1rem 0 white;
span {
display: block;
backface-visibility: hidden;
transition: transform 0.25s ease;
transform: translateY(var(--m)) translateZ(0);
@for $i from 1 through 12 {
&:nth-child(#{$i}) {
transition-delay: $i * 0.05s;
}
}
}
}
&:hover {
span {
--m: calc(1rem * -1);
}
}
}
JS:
document.querySelectorAll('.btn-text').forEach(button => {
const words = button.textContent.trim().split(' ');
button.innerHTML = '<div>' + words.map(word => '<span>' + word.split('').join('</span><span>') + '</span>').join(' ') + '</div>';
});