Text Animation using HTML, CSS
Hello! Welcome to CodeXimo.
Information
This HTML script sets up a basic web page structure and integrates an external CSS file for styling. The HTML document begins with the <!DOCTYPE html> declaration, ensuring that the browser understands it as an HTML5 document. The <head> section includes metadata such as the character set and viewport settings, essential for responsive design. Additionally, a link to an external CSS file, style.css, is provided to define the styles for the HTML elements. Within the <body> there's a single <h4> element displaying the text "Hii", which also uses a data-text attribute to store the same text.
HTML Basics
The<h4> element is given a relative position, a large font size of 14vh, and a base color that matches the background (#252839). This text is then outlined with a stroke of 0.3vw #383d52, making it stand out. The text is also transformed to uppercase for emphasis. The CSS pseudo-element. before is used to create an animated effect. It copies the content from the data-text attribute and positions itself absolutely over the original text. The color is set to #01fe87, and the border-right property creates a typing effect by controlling the width of the element through an animation.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h4 data-text="Hii">Hii</h4>
</body>
</html>
CSS Styling
The @keyframes rule named animate defines the animation for the pseudo-element. The animation starts with the width set to 0%, expands to 100% by 70%, and returns to 0% by 100%, creating a looping typing effect. This animation duration is set to 6 seconds and runs infinitely in a linear motion. The combination of these CSS properties and animations results in a visually appealing and dynamic text effect that draws the user's attention to the "Hii" greeting.
CSS Effect
The CSS part of the script begins with an @import rule to include the Poppins font from Google Fonts, which enhances the visual appearance of the text. The universal selector * is used to reset margins, paddings, and to set the box-sizing to border-box, which ensures consistent styling. The font-family is set to Poppins for a modern look. The body is styled to be a flex container, centering its contents both vertically and horizontally, with a minimum height of 100vh and a dark background color (#252839), providing a contrasting backdrop for the text.
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
*
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
h4
{
position: relative;
font-size: 14vh;
color: #252839;
-webkit-text-stroke: 0.3vw #383d52;
text-transform: uppercase;
}
h4::before
{
Content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: #01fe87;
-webkit-text-stroke: 0vw #383d52;
border-right: 2px solid #01fe87;
overflow: hidden;
Animation: animate 6s linear infinite;
}
@keyframes animate
{
0% ,10% ,100%
{
width: 0;
}
70%,90%
{
width: 100%;
}
</style>
Post a Comment