11 Cool HTML5 and CSS3 Text Styles and Mouse Hover Effects

Add-ons

2026-08-03 13:07 4 次浏览 • 0 次下载 6.8KB

11 Cool HTML5 and CSS3 Text Styles and Mouse Hover Effects

Plugin Description: This is a collection of visually impressive HTML5 and CSS3 text styles and mouse hover effects. It includes 11 different text styles and animations that are triggered when hovering over text. Some of the text animations are created using SVG and HTML5 Canvas.

Usage instructions

This is a collection of visually impressive HTML5 and CSS3 text styles and mouse hover effects. It includes 11 different text styles and animations that are triggered when hovering over text. Some of the text animations are created using SVG and HTML5 Canvas.

Please note that these effects may not work properly in all browsers. Use the latest modern browser to view them.

These text hover animations rely on the ::before and ::after pseudo-elements. Below is a visual demonstration of the "Kukuri" effect:

Text Hover Animation Effects

In this plugin, the dropdown menu is triggered by clicking or tapping the dropdown menu button.

The HTML structure for this text effect is as follows:

1	`<a` `class="link link--kukuri"` `href="#"` `data-letters="Kukuri">Kukuri</a>`

The common CSS styles for all text effects are as follows:

.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 8em;
  line-height: 1;
  color: #9e9ba4;
  display: inline-block;
}

In the Kukuri effect, when you hover over the text, a white bar sweeps from left to right, changing the text color as it passes. This effect is created using the ::before pseudo-element.

Other pseudo-elements contain copies of the text. They are used to change the width and create a "curtain reveal" effect. These animations are executed after a delay, so the first thing you see is the sweeping white bar.

.link--kukuri {
  text-transform: uppercase;
  font-weight: 900;
  overflow: hidden;
  line-height: 0.75;
  color: #b2b0a9;
}
  
.link--kukuri:hover {
  color: #b2b0a9;
}
  
.link--kukuri::after {
  content: '';
  position: absolute;gi
  height: 16px;
  width: 100%;
  top: 50%;
  margin-top: -8px;
  right: 0;
  background: #F9F9F9;
  transform: translate3d(-100%,0,0);
  transition: transform 0.4s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
  
.link--kukuri:hover::after {
  transform: translate3d(100%,0,0);
}
  
.link--kukuri::before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #424242;
  white-space: nowrap;
  width: 0%;
  transition: width 0.4s 0.3s;
}
  
.link--kukuri:hover::before {
  width: 100%;
}

For the code of the other effects, please refer to the downloaded source files.