Hello everyone, today we will learn how to create Text animation CSS. In the last lecture, we discussed how to create Footer design using Html and CSS. At this moment our concern is to create the water text animation using Html and CSS.
Text animation CSS:
We have created text animation and it can be used in any part of the website. This animation has a background image that is similar to the text animation.
Then it has text at the front of the image. This text is “ANIMATION”. It has layers which produce in the form of water. It has two types of colors. The upper and lower section of the color is different from each other. Water animation started animation without refreshing the page of the website.
You might like it:
It is simple to achieve it using Html and CSS only. To create it we have to go through certain steps and if you want to create it then you have to follow our step by step.
How to create Text animation CSS?
We are going to create it in three simple steps and following three steps you will be able to create it.
Download a code editor:
First, you have to download any code editor. You can download visual studio code, sublime text 3 or brackets etc
Source code of Html:
Html is a markup language, not a programming language. It is used for creating web pages. It is also part of the web page so we are gonna create using Html. First, open your IDE and create a file. Then save the file with the extension of .html if you want to create this. Then copy this Html code which is given below and paste it into your file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Animation - FantacyDesign</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="middle"> <h1>Morning </h1> </div> </body> </html> |
Source code of Text animation CSS:
Again create a CSS file in your editor and save it in the same folder of HTML with the extension of .css on your device. CSS is also a markup language, not a programming language and is used for designing web pages. This text animation is also a part of the web page so we will design it using CSS. Animations and style to the text have been added using CSS. So, copy the code and paste it there in your CSS file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
body{ margin: 0; padding: 0; font-family: "montserrat",sans-serif; background: url(bg.jpg) no-repeat; background-size: cover; } .middle{ position: absolute; top: 23.5%; left: 50%; transform: translate(-50%,-50%); } .middle h1{ font-size: 120px; text-transform: uppercase; font-weight: 900; color: #2c3e5036; background-image: url(water.png); -webkit-background-clip:text; animation: water 20s infinite; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.5), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.35), 0 20px 20px rgba(0,0,0,.2), } @keyframes water { from{ background-position: left 0 top 0; } to{ background-position: left 1000px top 0; } } |
Download the .zip file of the source code:
If you are not getting the solution of creating it then we have created a .zip file. You have to download it from the below button and it has all these files. In this way, you can create it by downloading our code file.
Task:
As you can observe that we have added the animation in the text. Now I am assigning you a task related to this text animation. First of all, change the Background image to a video. Then add another heading of text. Add the “GOOD” heading and then set the size and font family to the same for both. Increase the animation speed of the text.
If this post was helpful for you then don’t forget to subscribe to us and comment below if you have any type of query.
Thanks for reading this article.
Download Source CodeClick to Download
