Bouncing Ball loading
if you want to make a bouncing ball animation using html and css then this post is useful for you. To learn how to create such animation watch the video tutorial till end or copy the source code to use it.
Source code
1. HTML
<div class="base">
<div class="bat">
<span>LOADING</span>
</div>
<div class="ball"></div>
</div>
This code creates a simple HTML layout with three elements: a base, a bat, and a ball. The base element has a class of base, the bat element has a class of bat, and the ball element has a class of ball. The span element inside the bat element contains the text "LOADING".
The code snippet creates a basic HTML structure that could be used to create a loading animation. For example, the bat element could be animated to swing back and forth, and the ball element could be animated to move up and down.
2. CSS
STEP-1
*, *::after, *::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
The * selector is a universal selector, which means it will apply to all elements in the document.
The ::after and ::before pseudo-elements allow you to insert content before or after an element.
The margin and padding properties set the amount of margin and padding around an element.
The box-sizing property determines how the width and height of an element are calculated.
In this code, we are setting the margin and padding to 0 for all elements, and the box-sizing to border-box. This means that the width and height of an element will include the border and padding.
STEP-2
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
height: 100vh sets the height of the body element to 100% of the viewport height.
display: flex tells the browser to display the body element as a flex container.
align-items: center aligns the child elements of the body element vertically in the center.
justify-content: center aligns the child elements of the body element horizontally in the center.
flex-direction: column sets the flex direction of the body element to column. This means that the child elements of the body element will be stacked vertically.
STEP-3
.base{
height: 150px;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
transform: scale(1.5);
}
The height and width properties set the height and width of the element to 150px.
The display: flex property makes the element a flex container, which means that its children will be arranged in a flexible layout.
The align-items: center property aligns the children of the flex container vertically in the center.
The justify-content: center property aligns the children of the flex container horizontally in the center.
The transform: scale(1.5) property scales the element by 1.5, which means that it will be 1.5 times larger than its original size.
In summary, the code will create a 150px by 150px element that is centered both vertically and horizontally. The element will also be scaled by 1.5, which means that it will be 1.5 times larger than its original size.
STEP-4
.bat{
height: 0.2em;
width: 3em;
background-color: brown;
position: absolute;
top: calc(50% + 1em);
transform-origin: 25px -100px;
animation: bat 3s linear infinite;
}
height: 0.2em; sets the height of the bat to 0.2em.
width: 3em; sets the width of the bat to 3em.
background-color: brown; sets the background color of the bat to brown.
position: absolute; positions the bat absolutely on the page.
top: calc(50% + 1em); positions the bat 1em above the center of the page.
transform-origin: 25px -100px; specifies the point around which the bat will be transformed.
animation: bat 3s linear infinite; specifies that the bat will animate for 3 seconds in a linear fashion and repeat infinitely.
In summary: The code creates a brown bat that is 0.2em high and 3em wide. The bat is positioned absolutely at the top of the page, 1em above the center. The transform-origin property specifies the point around which the bat will be transformed, in this case 25px from the left and 100px from the top. The animation property specifies that the bat will animate for 3 seconds in a linear fashion (meaning that the speed of the animation will be constant) and repeat infinitely.
STEP-5
.ball{
height: 1em;
width: 1em;
border: 0.15em solid brown;
border-radius: 50%;
position: absolute;
top: calc(50% - 3em);
animation: ball 3s linear infinite;
}
The code creates a CSS class called .ball. This class defines the properties of a ball, such as its size, border, and position. The code also defines an animation called ball that makes the ball bounce up and down.
Here is a breakdown of the code:
height: 1em and width: 1em set the height and width of the ball to 1em.
border: 0.15em solid brown sets the border of the ball to 0.15em thick and brown.
border-radius: 50% sets the border radius of the ball to 50%, which means that the ball will be a circle.
position: absolute sets the position of the ball to absolute, which means that it will be positioned relative to the containing element.
top: calc(50% - 3em) sets the top position of the ball to 50% of the height of the containing element, minus 3em. This will center the ball vertically.
animation: ball 3s linear infinite defines an animation called ball that will make the ball bounce up and down for 3 seconds. The animation will repeat infinitely.
STEP-6
.bat span{
font-size: 0.7em;
position: absolute;
top: 1px;
}
It tells the browser how to style elements with the class name bat. The selector has three properties:
font-size: 0.7em sets the font size of the elements to 0.7em.
position: absolute sets the position of the elements to absolute. This means that the elements will be positioned relative to the nearest positioned ancestor element.
top: 1px sets the top position of the elements to 1px.
In other words, this code will make all elements with the class name bat have a font size of 0.7em, be positioned absolutely, and have a top position of 1px.
STEP-7
@keyframes ball {
0%{
transform: translate(0px);
}
5%{
transform: translateX(5px) translateY(5px);
}
25%{
transform: translateX(20px) translateY(45px);
}
45%{
transform: translateX(5px) translateY(5px);
}
50%{
transform: translate(0px);
}
55%{
transform: translateX(-5px) translateY(5px);
}
75%{
transform: translateX(-20px) translateY(45px);
}
95%{
transform: translateX(-5px) translateY(5px);
}
100%{
transform: translate(0px);
}
}
The code uses the @keyframes rule to define an animation called "ball". The animation has 10 frames, each of which specifies the position of the ball at a particular point in the animation. The first frame (0%) specifies that the ball is at its starting position. The last frame (100%) specifies that the ball stops moving. The intermediate frames specify the ball's position at various points in between.
The transform property specifies the position of the ball. The translate() function specifies the horizontal and vertical offset of the ball. For example, the translate(5px) translateY(5px) property specifies that the ball is 5 pixels to the right and 5 pixels down.
The animation is played by using the animation-name property on an element. For example, the following code would play the "ball" animation on an element with the id ball:
animation-name: ball;
STEP-8
@keyframes bat {
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(-15deg);
}
75%{
transform: rotate(15deg);
}
100%{
transform: rotate(0deg);
}
}
It defines a set of keyframes that can be used to animate the rotation of an element. The keyframes are defined as percentages of the animation, from 0% to 100%.
The first keyframe, at 0%, sets the transform property to rotate(0deg). This means that the element will start at a rotation of 0 degrees.
The second keyframe, at 25%, sets the transform property to rotate(-15deg). This means that the element will rotate 15 degrees counterclockwise.
The third keyframe, at 75%, sets the transform property to rotate(15deg). This means that the element will rotate 15 degrees clockwise.
The fourth keyframe, at 100%, sets the transform property to rotate(0deg). This means that the element will return to its original rotation of 0 degrees.
In other words, this code will animate the element to rotate 15 degrees counterclockwise, then 15 degrees clockwise, and then back to its original position.
---END---
Comments
Post a Comment