Introduction of Text Reveal Css
Here we are again, here to provide you with our best and latest projects, and today’s project is Block Text Revealing Effect (Text Reveal Css ). Which is made with the help of HTML and CSS. In this project, there will be an animation in which the block of color will go from left to right and text written behind the color will be shown. I hope this project will be helpful for you. As you can use it to show your name or the name of any famous thing with animation. This is best for any web developer.
Now let’s start making this Text Reveal Effect Css with the help of the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). We have used here the basic concept of coding, as everyone can understand it. Without any problem, no matter if they are a developer or a fresher. If you’ll have to face any problems. Then you can contact us through the link given below in the footer of the page.
HTML (Hypertext Markup Language)
First, we will make the structure of this Text Reveal Animation Css with the help of HTML (the hyper-markup language used to make the structure of any web page on a website). In this, we will give the title of the project in the title tag. Then we will move toward the main content of the page in the body tag. (in this tag, we write all the code to display on desktop). Which we will make a parent div, in which we will make two small divs. In the first div, we will write “wwelcome,” and in another div, we will write “to layak coder.”. Give it a class name; the class names of both divs will be the same to give it styling in the CSS portion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1 class="block-effect" style="--td: 1.2s">
<div class="block-reveal" style="--bc: #4040bf; --d: .1s">Welcome</div>
<div class="block-reveal" style="--bc: #bf4060; --d: .5s">To LayakCoder</div>
</h1>
</body>
</html>CSS (Cascadig Style Sheet)
After making the structure of this Text Reveal Effect Css, we will now style it and apply animation with the help of CSS . Which is used to give the design and animation to the HTML page. This, we will first take the parent div to the center of the screen and then move toward the main content. Where we will adjust the size and position of the text written in both divs. We will also use the font-bold property (which is used to make the font bold). Then we will design the animation part. We will use the after and before property (which is used to define something on another div).
/* reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
min-height: 100vh;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* other */
.info {
margin: 20px 0;
text-align: center;
}
p {
color: #2e2e2e;
margin-bottom: 20px;
}
/* block-$ */
.block-effect {
font-size: calc(8px + 6vw);
}
.block-reveal {
--t: calc(var(--td) + var(--d));
color: transparent;
padding: 4px;
position: relative;
overflow: hidden;
animation: revealBlock 0s var(--t) forwards;
}
.block-reveal::after {
content: '';
width: 0%;
height: 100%;
padding-bottom: 4px;
position: absolute;
top: 0;
left: 0;
background: var(--bc);
animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards;
}
/* animations */
@keyframes revealBlock {
100% {
color: #0f0f0f;
}
}
@keyframes revealingIn {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes revealingOut {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.abs-site-link {
position: fixed;
bottom: 20px;
left: 20px;
color: hsla(0, 0%, 0%, .6);
font-size: 16px;
}Animation of Text Reveal Css
After making the whole design of the Text Reveal Animation Css. We will make it animated using the keyframe. It is framework of CSS used to give the animation to the web page. This, we will control the after-before propery, in which we will control the color used on the text. Also the visibility of the text when the color block passes from above the text.
Output of Text Reveal Css
Finally, we have made this Text Reveal Effect Css using the simple and easy code of HTML and CSS by following their code step by step. I hope this project is helpful for you. You can make such a project for your practice to increase your knowledge about coding. If you want the source code, click on the button given below.
For more explanation, click on the link given below for Css Text Reveal Animation.
You can also check:
