Welcome to Codingfizz,
Hello everyone, I will share how to create animated text using HTML and CSS in this article. And this article is part one of Text Animation.
Here is the second part of Text Animations: Text Animations Part 02
This article has four types of text animation:
- Rainbow Text (Gradient Text),
- Text Glitch 1.0
- Text Glitch 2.0
- Text Mask
First, we need to create two files in the text editor an HTML file (index.html) and a CSS file (style.css) for each text animation.
Rainbow Text (Gradient Text)
To create this program Rainbow Text (Gradient Text). First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Rainbow Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<h1>Codingfizz</h1>
</div>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css.
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body{
font-family:'Roboto';
}
*{
margin: 0;
padding: 0;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center h1{
user-select: none;
font-size: 50px;
color: white;
background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, rgb(0,255,0) 14.28%,
rgb(0,255,255) 21.4%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
background-size: 600vw 600vw;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: slide 10s linear infinite forwards;
}
@keyframes slide {
0%{
background-position-x: 0%;
}
100%{
background-position-x: 600vw;
}
}
Text Glitch 1.0
.png)
To create this program Text Glitch. First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Glitch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center text">
<label data-content="Codingfizz">
<span>Codingfizz</span></label>
</div>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: #111;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text label{
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
label span{
position: relative;
color: white;
z-index: 2;
}
label span:hover{
filter: blur(1px);
}
.text label::before,
.text label::after{
position: absolute;
content: attr(data-content);
top: 0;
left: 0;
visibility: hidden;
}
.text:hover label::before,
.text:hover label::after{
visibility: visible;
}
.text:hover label::before{
color: rgba(255,0,188,.8);
animation: glitch .3s cubic-bezier(.25,.46,.45,.94) both infinite;
}
.text:hover label::after{
color: rgba(0,255,255,.8);
animation: glitch .3s cubic-bezier(.25,.46,.45,.94) reverse both infinite;
}
@keyframes glitch {
0%{
transform: translate(0);
}
20%{
transform: translate(-3px, 3px);
}
40%{
transform: translate(-3px, -3px);
}
60%{
transform: translate(3px, 3px);
}
80%{
transform: translate(3px, -3px);
}
100%{
transform: translate(0);
}
}
Text Glitch 2.0
To create this program Text Glitch. First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Glitch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h2 class="text" data-text="Codingfizz">
Codingfizz
</h2>
</div>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: black;
}
.content{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content .text{
position: relative;
color: #fff;
font-weight: 700;
font-size: 20px;
transform: scale(2);
padding: 30px;
letter-spacing: 2px;
text-transform: uppercase;
}
.content .text:before,
.content .text:after {
padding: 30px;
color: white;
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
background: black;
overflow: hidden;
top: 0;
}
.content .text:before{
left: 3px;
text-shadow: -2px 0 red;
animation: glitch-1 2s linear infinite reverse;
}
.content .text:after{
left: -3px;
text-shadow: -2px 0 blue;
animation: glitch-2 2s linear infinite reverse;
}
@keyframes glitch-1 {
0% {
clip: rect(132px, auto, 101px, 30px);
}
5% {
clip: rect(17px, auto, 94px, 30px);
}
10% {
clip: rect(40px, auto, 66px, 30px);
}
15% {
clip: rect(87px, auto, 82px, 30px);
}
20% {
clip: rect(137px, auto, 61px, 30px);
}
25% {
clip: rect(34px, auto, 14px, 30px);
}
30% {
clip: rect(133px, auto, 74px, 30px);
}
35% {
clip: rect(76px, auto, 107px, 30px);
}
40% {
clip: rect(59px, auto, 130px, 30px);
}
45% {
clip: rect(29px, auto, 84px, 30px);
}
50% {
clip: rect(22px, auto, 67px, 30px);
}
55% {
clip: rect(67px, auto, 62px, 30px);
}
60% {
clip: rect(10px, auto, 105px, 30px);
}
65% {
clip: rect(78px, auto, 115px, 30px);
}
70% {
clip: rect(105px, auto, 13px, 30px);
}
75% {
clip: rect(15px, auto, 75px, 30px);
}
80% {
clip: rect(66px, auto, 39px, 30px);
}
85% {
clip: rect(133px, auto, 73px, 30px);
}
90% {
clip: rect(36px, auto, 128px, 30px);
}
95% {
clip: rect(68px, auto, 103px, 30px);
}
100% {
clip: rect(14px, auto, 100px, 30px);
}
}
@keyframes glitch-2 {
0% {
clip: rect(129px, auto, 36px, 30px);
}
5% {
clip: rect(36px, auto, 4px, 30px);
}
10% {
clip: rect(85px, auto, 66px, 30px);
}
15% {
clip: rect(91px, auto, 91px, 30px);
}
20% {
clip: rect(148px, auto, 138px, 30px);
}
25% {
clip: rect(38px, auto, 122px, 30px);
}
30% {
clip: rect(69px, auto, 54px, 30px);
}
35% {
clip: rect(98px, auto, 71px, 30px);
}
40% {
clip: rect(146px, auto, 34px, 30px);
}
45% {
clip: rect(134px, auto, 43px, 30px);
}
50% {
clip: rect(102px, auto, 80px, 30px);
}
55% {
clip: rect(119px, auto, 44px, 30px);
}
60% {
clip: rect(106px, auto, 99px, 30px);
}
65% {
clip: rect(141px, auto, 74px, 30px);
}
70% {
clip: rect(20px, auto, 78px, 30px);
}
75% {
clip: rect(133px, auto, 79px, 30px);
}
80% {
clip: rect(78px, auto, 52px, 30px);
}
85% {
clip: rect(35px, auto, 39px, 30px);
}
90% {
clip: rect(67px, auto, 70px, 30px);
}
95% {
clip: rect(71px, auto, 103px, 30px);
}
100% {
clip: rect(83px, auto, 40px, 30px);
}
}
Text Mask
To create this program Text Glitch. First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Mask Moving</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text">Codingfizz</div>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css
@import url('https://fonts.googleapis.com/css?family=Raleway:800&display=swap');
*{
margin: 0;
padding: 0;
}
body{
display: flex;
height: 100vh;
user-select: none;
text-align: center;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #e8effd 0%, #d6e3f5 100%);
}
.text{
font-size: 100px;
background: url("https://media.giphy.com/media/xT8qBaEeLE0ZzRreCY/giphy.gif") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -4px;
text-shadow: 3px 3px 4px rgba(0,0,0,.2);
font-family: 'Raleway', sans-serif;
}
Here is the second part of Text Animations: Text Animations Part 02
0 Comments