Attractive Text Animation in HTML and CSS.
Hello Viewers😊
Today we will learn how to create or design Text Animation by using HTML and CSS.
If you want to learn step by step in Hindi, So you can move to my YouTube's Channel (IT in Hindi).
In this post we are providing the full source code of Text Animation.
You can copy and use the code because it is non copyright😊.
<html>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
background-color: #111;
}
.title {
font-family: "Montserrat";
text-align: center;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
letter-spacing: 1px;
}
h1 {
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
font-size: 120px;
line-height: .75;
margin: 10px 0;
}
/* styling my button */
.white-mode {
text-decoration: none;
padding: 7px 10px;
background-color: #122;
border-radius: 3px;
color: #FFF;
transition: .35s ease-in-out;
position: absolute;
left: 15px;
bottom: 15px;
font-family: "Montserrat";
}
.white-mode:hover {
background-color: #FFF;
color: #122;
}
</style>
<div class="title">
<h1>Thank<br/>You</h1>
<a target="_blank" href="https://www.youtube.com/channel/UCTt7PLZfw50f-fbZBsrQCuA" class="white-mode">IT in Hindi</a>
</div>
</html>
How to run the source code :-
Step1- Now copy and paste the HTML code mentioned above and save the file as "textanimation.html".
Step2- Run "textanimation.html" file.
0 Comments