graste/Scramble text.md

Created November 3, 2024 14:13

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/graste/8e4fa968fbb1c5a947428e8d87e23635.js"></script>
Save graste/8e4fa968fbb1c5a947428e8d87e23635 to your computer and use it in GitHub Desktop.

scramble text with CSS

Raw

– translate some letter strips on :hover – vertical letters with word-break/white-space

a:is(:hover, :focus-visible) span {
    transition: translate 0.25s var(--delay) steps(11);
    translate: -50% calc(100% - 1lh);
}

Select an option