Lets learn how to create Newton's cradle css animation using html and css
only.
Source Code
1. HTML
<divclass="base">
<divclass="bar"></div>
<divclass="sphere first"></div>
<divclass="sphere"></div>
<divclass="sphere"></div>
<divclass="sphere"></div>
<divclass="sphere last"></div>
</div>
The outermost <div> element has a class name of "base", which acts as a
container for all the child elements. Inside the "base" <div> element,
there is another <div> element with a class name of "bar". This element
represents a horizontal bar or stand on which the spheres are placed. After
the "bar" element, there are five <div> elements with a class name of
"sphere". These elements represent the spheres and are arranged in a row. The
first sphere element has an additional class name of "first", which may be
used to distinguish it from the other spheres, and the last sphere element has
an additional class name of "last", which may be used to distinguish it from
the other spheres.
2. CSS
Step-1
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
The * selector targets every element and the code sets the margin and padding
values to 0 pixels, effectively removing any unnecessary white space around
the elements. The box-sizing property is set to border-box, which ensures that
the width and height of each element include its padding and border values,
preventing layout issues caused by content overflow. This code helps to create
a consistent and clean layout for the webpage and provides a good starting
point for further styling.
Step-2
body{
height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
This CSS code sets the style properties for the body element of a web page.
The height property is set to 100vh, which means the height of the body
element will be equal to the full height of the viewport. The width property
is set to 100%, which means the body element will take up the full width of
the viewport. The display property is set to flex, which makes the body
element a flex container. The align-items property centers the items
vertically within the body element, and the justify-content property centers
the items horizontally within the body element. Overall, this code creates a
centered layout for the contents of the body element, which can be useful for
creating responsive designs that adjust to different screen sizes.
Step-3
.base{
height:250px;
width:350px;
display:flex;
justify-content:center;
position:relative;
}
This CSS code defines the style for an HTML element with a class name of
"base". The height and width properties set the dimensions of the element to
250 pixels in height and 350 pixels in width. The display property sets the
element to use the Flexbox layout model, which allows for flexible and
responsive positioning of child elements. The justify-content property is set
to "center", which horizontally centers the child elements within the parent
element. The position property is set to "relative", which specifies that the
element should be positioned relative to its normal position in the document
flow. Overall, this code provides a basic layout for a container element with
flexible and responsive positioning of child elements.
Step-4
.sphere{
display:inline-block;
height:50px;
width:50px;
position:relative;
top:150px;
border-radius:50%;
background:radial-gradient(white, black);
}
This CSS code defines the styling properties for elements with a class name of
"sphere". The display property is set to inline-block, which allows the
elements to be placed on the same line as other inline elements while still
retaining their block-level properties. The height and width properties are
set to 50 pixels each, defining the size of the elements. The position
property is set to relative, allowing the elements to be positioned relative
to their normal position. The top property is set to 150 pixels, moving the
elements 150 pixels down from their normal position. The border-radius
property is set to 50%, giving the elements a circular shape. Finally, the
background property is set to a radial gradient, with white at the center and
black at the edges of the element. This code creates a visually appealing
design for the elements with the "sphere" class name.
Step-5
.sphere::before{
content:"";
display:block;
height:100px;
width:1px;
background-color:brown;
position:relative;
top:-100px;
left:23px;
}
This is a CSS code that adds a small line above each element with the class
name "sphere". The ::before pseudo-element creates a new element before the
selected element, in this case, ".sphere". The content property specifies the
content of the generated element, which is set to an empty string to create a
line. The display property is set to block to ensure that the generated
element takes up space in the document flow. The height and width properties
define the size of the line, with the height set to 100 pixels and the width
set to 1 pixel. The background-color property sets the color of the line to
brown. The position property is set to relative to allow the generated element
to be positioned relative to its parent element. Finally, the top and left
properties are used to position the line above the ".sphere" element, with a
top offset of -100 pixels and a left offset of 23 pixels.
Step-6
.bar{
height:5px;
width:220px;
background-color:brown;
position:absolute;
top:45px;
}
This is a CSS code that styles an element with a class name of "bar". The
height and width properties set the dimensions of the element, with a height
of 5 pixels and a width of 220 pixels. The background-color property sets the
color of the background to brown. The position property is set to absolute,
which positions the element relative to its nearest positioned ancestor, which
in this case could be the body or another container element. The top property
sets the distance between the top edge of the element and the top edge of its
nearest positioned ancestor, with a value of 45 pixels. Overall, this code
creates a brown horizontal line with a height of 5 pixels and a width of 220
pixels, positioned 45 pixels from the top of its container element.
Step-7
.first{
animation-name: rotatePositive;
animation-duration:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
transform-origin:23px-100px;
}
This CSS code applies an animation effect to an HTML element with the class
name "first". The animation is defined by a set of properties that are part of
the animation shorthand property. The animation-name property specifies the
name of the animation, which in this case is "rotatePositive". The
animation-duration property sets the time taken for the animation to complete,
which is 1 second. The animation-iteration-count property sets the number of
times the animation should repeat, which in this case is infinite. The
animation-direction property specifies the direction of the animation on each
iteration, which is set to alternate, causing the animation to reverse
direction on every other cycle. The transform-origin property specifies the
origin point for the transformation, which in this case is set to 23 pixels
from the left and -100 pixels from the top of the element. Overall, this code
creates a rotating animation effect that continues indefinitely, providing an
interesting visual effect for the element.
Step-8
.last{
animation-name: rotateNegative;
animation-duration:1s;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
transform-origin:23px-100px;
}
This is a CSS code that applies animation effects to elements with a class of
"last". The animation-name property specifies the name of the animation, which
is "rotateNegative" in this case. The animation-duration property sets the
length of time that the animation takes to complete, which is 1 second. The
animation-delay property sets a delay of 1 second before the animation begins.
The animation-iteration-count property sets the number of times the animation
is repeated, which is "infinite" in this case. The animation-direction
property specifies the direction of the animation, which is "alternate",
meaning the animation will reverse direction after each iteration. Finally,
the transform-origin property specifies the point around which the element
should rotate, which is 23 pixels from the left and -100 pixels from the top.
This code creates a spinning animation for the elements with a class of "last"
that repeats indefinitely and alternates direction after each iteration.
Step-9
@keyframesrotatePositive {
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(0deg);
}
100%{
transform:rotate(20deg);
}
}
This is a CSS code that defines an animation sequence using keyframes. The
@keyframes rule indicates that a new animation is being defined with the name
rotatePositive. This animation will cause an element to rotate clockwise by 20
degrees over a period of time. The animation sequence is defined by three
keyframes that are represented by percentages. At 0%, the element's rotation
is set to 0 degrees. At 50%, the element's rotation remains at 0 degrees.
Finally, at 100%, the element's rotation is set to 20 degrees. This code can
be applied to an HTML element by using the animation property and specifying
the name of the animation and the duration of the animation. When applied, the
element will rotate smoothly between the keyframes, creating a visually
appealing animation effect.
Step-10
@keyframesrotateNegative {
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(0deg);
}
100%{
transform:rotate(-20deg);
}
}
This is a CSS @keyframes rule that defines an animation called rotateNegative.
The animation rotates an element in a negative direction by 20 degrees,
creating a slight movement effect. The keyframes are defined at three
different percentages of the animation duration - 0%, 50%, and 100%. At 0%,
the element has no rotation applied. At 50%, the element remains at the same
rotation as at 0%. At 100%, the element has the maximum rotation of -20
degrees applied. This rule can be applied to any HTML element on the webpage,
giving it a smooth and subtle rotation effect.
Comments
Post a Comment