Text Animations html css

 Text Animation

Creating visually appealing web designs often requires combining creativity with code. One stunning effect is a 3D perspective text animation, which gives a dynamic and engaging appearance to any web page. This tutorial will walk you through how to create a rotating 3D text with shadow effects using HTML and CSS. Let’s explore the magic behind this effect!

HTML Structure
The HTML includes a simple structure: a div containing an h1 element with a custom data-shadow attribute. This attribute is leveraged to create the shadow effect dynamically.

<div>
    <h1 data-shadow="Frontend">Frontend</h1>
</div>

• The data-shadow attribute holds the text for the shadow effect.
• The h1 displays the main text content with styling and animation applied.

CSS Styling
The CSS is where the magic happens. Here’s how it is structured:

General Styling:
The body tag centers the content with a dark background to emphasize the glowing text.

/* * General Styling */
body {
  background-color: #222224; /* Dark background color */
  height: 100vh; /* Full viewport height */
  display: grid; /* Use grid layout */
  place-content: center; /* Center content vertically and horizontally */
  margin: 0;
  font-family: Arial, sans-serif; /* Set a clean font family */
}

• 3D Perspective Setup:
  The div is styled with perspective to enable 3D effects for its children.

/* ! 3D Perspective Setup */
div {
  perspective: 1000px; /* Set perspective distance for 3D effect */
  perspective-origin: 50% -200px; /* Adjust origin for a dynamic perspective */
}

Animated Text:
The h1 element is styled to rotate along the Y-axis with glowing text shadows.

/* ! Animated Text Styling */
h1 {
  text-align: center; /* Center align the text */
  text-transform: uppercase; /* Make text all uppercase */
  font-size: 4rem; /* Set large font size */
  letter-spacing: 0.15em; /* Add spacing between letters */
  color: #eee; /* Light text color for contrast */
  position: relative; /* For pseudo-element positioning */
  animation: rotate 2s ease-in-out alternate infinite; /* Infinite rotation animation */
}

Shadow Effect:
A pseudo-element (::before) creates a glowing shadow effect behind the main text.

/* TODO: Add shadow effect before main text */
h1::before {
  content: attr(data-shadow); /* Use the value of the data-shadow attribute */
  color: transparent; /* Make the text invisible */
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* Add a glowing shadow effect */
  position: absolute; /* Place it behind the main text */
  z-index: -1; /* Ensure it is below the main text */
  top: 0; /* Align with main text */
  left: 0;
  right: 0;
  margin: 0; /* No additional margins */
  animation: skew 2s ease-in-out alternate infinite; /* Infinite skew animation */
  transform-origin: bottom; /* Transform from the bottom origin */
}

Keyframes Animations:
Two animations, rotate and skew, handle the dynamic motion of the text and shadow.

/* * Keyframes for rotating the text */
@keyframes rotate {
  0% {
    transform: rotateY(-10deg); /* Start rotation on the Y-axis */
    /* Gradient text shadow effect */
    text-shadow: 1px -1px #ccc, 2px -1px #bbb, 3px -2px #aaa, 4px -2px #999,
      5px -3px #888, 6px -3px #777;
  }
  100% {
    transform: rotateY(10deg); /* End rotation on the Y-axis */
    /* Reverse gradient text shadow effect */
    text-shadow: -1px -1px #ccc, -2px -1px #bbb, -3px -2px #aaa, -4px -2px #999,
      -5px -3px #888, -6px -3px #777;
  }
}

/* TODO: Keyframes for skewing the shadow */
@keyframes skew {
  0% {
    transform: scaleY(0.3) skewX(-15deg); /* Shrink and skew shadow on the X-axis */
  }
  100% {
    transform: scaleY(0.3) skewX(-20deg); /* Adjust skew angle for animation */
  }
}

Conclusion

This code creates a stunning 3D rotating text animation with glowing shadows. You can customize the animation timing, colors, and text to suit your design needs. Try experimenting with the perspective, animation, and text-shadow properties for unique effects. This feature is ideal for headers, landing pages, or creative projects.