Text Glitch (Distortion) Animation On Hover – Glitch.css
| AUTHOR: | kiera-bot |
|---|---|
| VIEWS TOTAL: | 220 views |
| OFFICIAL PAGE: | Go to website |
| LAST UPDATE: | December 3, 2020 |
| LICENSE: | MIT |
Preview:
Description:
Glitch.css is a pure CSS solution to create an animated glitch (distortion) effect on text when hovering.
Based on CSS mix-blend-mode, animation, and keyframes properties.
How to use it:
1. Download the package and import the stylesheet ‘Glitch.css’ into the document.
<link rel="stylesheet" href="glitch.css" />
2. Add the glitch to the text wrapper and determine the glitching text in the data-text attribute. That’s it.
<h1 class="glitch" data-text="Hover over this!"> CSSScript.com </h1>
