How to Create an Animated Diya using HTML and CSS
Hey coders, in this tutorial we will learn how to create an Animated Diya using HTML and CSS. Before starting with the tutorial let us first get to know about animations and how we create them using Html and CSS.
What are Animations and how we create them using CSS?
An animation is something which lets an element change from one style to another gradually. You can change as many CSS properties you want, as many times as you want. To use animation in CSS, you will have to first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times in your animation.
Let us now start by creating our Animated Diya using HTML and CSS.
Step 1 : Adding basic HTML
Creating a basic structure of our Animated Diya using HTML ā Hypertext Markup Language.
Here is the code for you to directly use it. The code will be explained below for you to understand how to create the Animated Diya.
<html>
<head>
<title>Animated Diya</title>
<link rel="stylesheet" href="adStyle.css">
</head>
<body>
<div class="container">
<div class="diya">
</div>
<div class="message">
<h2 style="font-size:4rem;color:#f1c40f;">
Happy Diwali
</h2>
</div>
</div>
</body>
</html>Let us start by understanding the <head> section of out HTML code:
- Using the title tag we will give title to our webpage – Animated Diya.
- Then to style our Animated Diya using CSS we need to link a CSS file containing CSS code which will create the diya animation. Here name of the css file is adStyle.css but you can name it accordingly.
Responsive Gym Website Using HTML ,CSS & JavaScript
Now letās start creating the basic structure of Our Animated Diya inside the <body>:
- We will start by creating a division using div tag and add a class in this div, class=”container”. Inside this div we will create another div with class=”diya”.
- Another div which will contain the message to be displayed on our page. We will add a class=”message” in it. Inside the div, our message will be written using the heading tag . Message is “Happy Diwali”. You can customize the message according to you as well.
- We will now add styling to our message using style attribute in our heading tag for the message, style=”font-size:4rem;color:#f1c40f;”. This will change the font size to 4 rem and color code is #f1c40f.
OUTPUT: Basic structure using HTML
Step 2: Add CSS to style the basic structure of Our Message and to create the Animated Diya.
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Satisfy&display=swap');
*{
margin:0;
padding:0;
font-family: 'Satisfy', cursive;
}
body{
background:#006266
}
.container{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.diya{
width:200px;
height:100px;
background:#ff3838;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
position:relative;
left:50%;
transform:translateX(-50%)
}
.diya:before{
position:absolute;
content:"";
width:200px;
height:60px;
background:#f1c40f;
border-radius:50%;
border:10px solid #222;
box-sizing:border-box;
top:-30px
}
.diya:after{
position:absolute;
content:"";
width:50px;
height:150px;
background:#f1c40f;
border-radius:50%;
bottom:90%;
box-shadow:0px 0px 30px #f1c40f, 0px 0px 50px #f1c40f;
animation:animate 2s ease infinite;
transform-origin:bottom
}
@keyframes animate{
0%{ transform:scaleY(1) }
50%{ transform: scaleY(1.07) scaleX(1.05) }
100%{ transform:scaleY(1) }
}
.message{
text-align:center;
color:#fff;
}Let us now understand how we will style Our Animated Diya:
- Firstly we will start by importing some styles into our stylesheet using @import –@import url(‘https://fonts.googleapis.com/css?family=Dancing+Script&display=swap’);Ā Ā @import url(‘https://fonts.googleapis.com/css?family=Satisfy&display=swap’); . These are used to import the font styling for our message.
- Using the universal selector ( * ), we will style our pageĀ by using the following properties – margin:0; padding:0; font-family: ‘Satisfy’, cursive;
- Targeting the body of our page we will change the background color with the hex code – #006266.
- Using the dot selector we will target the html elements with class=”container” and give the following styling to it : position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); . The transform property will allow you to move, rotate, scale, and skew elements. The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
- Now with the dot selector we will target the html elements with class=”diya” and give the following styling to it : width:200px; height:100px; background:#ff3838; border-bottom-left-radius:100px; border-bottom-right-radius:100px; position:relative; left:50%; transform:translateX(-50%) .
50+ HTML, CSS & JavaScript Projects With Source Code
Let us take a look at the output till now for better understanding of this project:
Now lets style the animation of our diya:
- Targeting the HTML element using dot selector with class diya and CSS :before selector used to insert content before the content of the selected element or elements. We will give the following styling for the required animation output: Keeping the position absolute, setting width and height to 200px and 60px respectively. Background color code #f1c40f, border-radius:50%; border:10px solid #222; box-sizing:border-box; top:-30px.
- Now setting the after of the diya element using CSS :after selector used to insert content after the content of the selected element or elements. It’s used by attaching :after to the element it is to be used on. Giving the following styling: position:absolute; content:””; width:50px; height:150px; background:#f1c40f; border-radius:50%; bottom:90%; box-shadow:0px 0px 30px #f1c40f, 0px 0px 50px #f1c40f; animation:animate 2s ease infinite; transform-origin:bottom. The animation shorthand CSS propertyĀ applies an animation between styles.Ā The animation property syntax is animation:Ā name duration timing-function delay iteration-count direction fill-mode play-state;
- Now we will set the keyframes for our animation using @keyframes. The @keyframes rule specifies the animation code. The syntax is @keyframesĀ animationnameĀ {keyframes-selectorĀ {css-styles;}} .
- Code snippet for the keyframes property:-
@keyframes animate{
0%{ transform:scaleY(1) }
50%{ transform: scaleY(1.07) scaleX(1.05) }
100%{ transform:scaleY(1) }
}- The percentages are the keyframe selectors which basically represent the percentage of the animation duration. Using the selector we will give the CSS style – transform: scale()
- Finally, we will now style the message using dot selector for the message class and set the properties: text-align: center and color:#fff .
OUTPUT:
This is the outcome of our HTML and CSS combined to create our Animated Diya.
I hope that this article was helpful and you understood the whole project. Now letās take a look at theĀ Live Preview of our Animated Diya.
Live Preview of the Animated Diya with HTML and CSS:
We have successfully created āOur Servicesā section using HTML and CSS. You can use this project directly by copying it into your IDE. We hope that you understood the project. If you have any doubts then feel free to comment them down!!
Follow:Ā codeWithRandom
Code by: csPoint
Written by:Ā Cheshta Vohra
![Read more about the article 20+ CSS Popup Windows [ Demo + Code ]](https://www.codewithrandom.com/wp-content/uploads/2022/11/15-Bootstrap-login-forms126-300x157.png "20+ CSS Popup Windows [ Demo + Code ]")
