9 Pretty Cool Text Effects – Toxel CSS

Category: Animation , Javascript , Text | September 17, 2021
Author:luisangelmaciel
Views Total:160 views
Official Page:Go to website
Last Update:September 17, 2021
License:MIT

Preview:

9 Pretty Cool Text Effects – Toxel CSS

Description:

A set of 9 pretty cool text effects written in CSS/CSS3 and JavaScript.

Text Effects Included:

  • Slash colors
  • Confetti
  • Heartbeat
  • Fade and grow
  • Typing
  • Luzz neon
  • Glitch
  • GlitchOne
  • Door

How to use it:

1. Load the necessary JavaScript and CSS files.

<link rel="stylesheet" href="css/toxel.css" />
<script src="js/script.js"></script>

2. The HTML.

<!-- .slash-color -->
<p class="slash-color ">.slash-color</p>
<!-- .confetti -->
<div class="confetti" onclick="throwConfetti() "> .confetti <small>  ¡touch me!  </small> 🎉 </div> <br>
<!-- .heartbeat.-->
<b> <i class="fa fa-heart heartbeat "></i> .heartbeat </b>
<!-- .fade-and-grow -->
<div class="fade-and-grow">
  <div class="item-fade-and-grow">
      <div data-text=".fade-and-grow" class="linktext-fade-and-grow">.fade-and-grow</div>
  </div>
</div>
<!-- .txt-type-->
<p><b>.txt-</b>
  <span class="txt-type" data-wait="300" data-words='["type", "tYPE", "TypE", "Type"]'></span>
</p>
<!-- .luzz-neon -->
<div class="luz-neon ">
  <b><span>.</span>lu<span>z</span>-n<span>e</span>o<span>n</span>
</div>
<!-- ..glitch -->
<p class="glitch " data-text=".glitch">.glitch</p>
<!-- .glitchOne-->
<p class="glitchOne " data-text=".glitchOne">.glitchOne</p>
<!-- .door -->
<center>
  <div class="trapdoor ">
    <div class="top door">
    </div>
    <div class="bottom door">
    </div>
    .trapdoor
  </div><br><br>
</center>

You Might Be Interested In:


Leave a Reply