Text Glitch (Distortion) Animation On Hover – Glitch.css

Category: Animation , CSS & CSS3 , Text | December 3, 2020
Author: kiera-bot
Views Total: 465 views
Official Page: Go to website
Last Update: December 3, 2020
License: MIT

Preview:

Text Glitch (Distortion) Animation On Hover – Glitch.css

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>

You Might Be Interested In:


Leave a Reply