Dynamic Text Animation with HTML and CSS
Dynamic text animation refers to the technique of animating text elements on a webpage using CSS and sometimes JavaScript. It involves applying various effects and transitions to text, making it move, change color, fade in or out, or display in a unique way to capture users' attention. This technique is commonly used in headers, banners, call-to-action sections, and other parts of a website where emphasizing textual content is crucial.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation</title>
<link rel="stylesheet" href="text.css">
</head>
<body>
<h1>text animation</h1>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: blue;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: bolder;
font-size: 50px;
text-transform: uppercase;
-webkit-background-clip: text;
color: transparent;
background-size: cover;
background-image: url("https://media.giphy.com/media/xTiTnkZoCSqp3Dn6yk/giphy.gif");
}
0 Comments