Wednesday, January 13, 2021

Amazing Colorful Text and Background Animation - Using Pure CSS & HTML



Description


Hello everyone! In this video, you are going to learn how to design a colorful text animation by animate font-weight and amazing colorful background animation using box-shadow only with CSS and HTML. One box-shadow contains many square dots from many colors. This background amination is animated by using "transform: translateY();" property. Hope this tutorial will give you ideas to do more creative works.


First, create the index.html file and the style.css file. After you created these two files, Start the HTML part of the animation elements in the index.html file as you can see in the video. After you complete the HTML part, Then link the style.css file to the index.html file between <head></head> tags and go to the sytyle.css file cand start the styling part of the animation elements as you can see in the video fo both square dots and text animations. Follow the video to complete this awesome animation effect. That's all hope this video will be helpful to create awesome animation designs.



All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.


Source Codes


index.html



style.css



Download Source Files

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

Whatsapp Button works on Mobile Device only