In this article, we will see the creation of the Multiple Pendulum Animation using HTML & CSS. To accomplish this task, we will use two elements, i.e. for creating the shadow and knob for the Pendulum, we will use CSS :after and :before selectors. We will follow the below approach to create the Multiple Pendulum Animation.
Approach:
- First, create an HTML snippet for creating the structure of the pendulum.
- As pendulum elements, create two elements one div element with the pendulum-base class name, and within the pendulum-base, create multiple pendulum elements. Here we’re creating 15 pendulums inside my pendulum-base class. Now, start applying CSS for animation.
- Apply global CSS with the help of the * selector so that everything works correctly.
- Apply styling to the pendulum-base class. For that, we can create a large plain rectangle width of 500px and height of 300px and give a border-top of 3px to the rectangle, so that it looks like the base of the pendulum structure.
- Now add CSS for the pendulums. For that, we’re applying one common CSS to all pendulums elements, for that, we can apply CSS for separate pendulums with the help of :nth-of-type.
- For creating the knob, we use :before selector with a width of 15px and height of 15px with background: radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%) to create a sphere and its realistic color.
- For adding the shadow, we will use :after selector with background: rgba(0, 0, 0, 0.3) and filter: blur(5px) which makes it looks like a shadow.
- Now, creates an animation that is responsible for the pendulum swinging back and forth. It rotates the thread element around its midpoint using the transform property.
- At the start and end of the animation (0% and 100%), the element is rotated 25 degrees to the right and translated horizontally to the left by 50% of its own width using the transform property.
- At the halfway point of the animation (50%), the element is rotated 25 degrees to the left and translated horizontally to the left by 50% of its own width.
Example: This example illustrates the Multiple Pendulum Animation using HTML & CSS.
HTML
<!DOCTYPE html> <html>
<head>
<title>
Multiple Pendulum Animation using CSS
</title>
<style>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pendulum-base {
width: 500px;
height: 300px;
margin: auto;
border-top: 3px solid #66d63e;
}
.pendulum {
position: absolute;
right: 50%;
transform: translate(-50%) rotate(20deg);
width: 2px;
height: 150px;
background: #b5ff9a;
animation: moveIt 1.5s ease-in-out infinite;
transform-origin: 50% 0;
}
.pendulum:nth-of-type(2) {
height: 160px;
animation-duration: 1.52s;
}
.pendulum:nth-of-type(3) {
height: 170px;
animation-duration: 1.54s;
}
.pendulum:nth-of-type(4) {
height: 180px;
animation-duration: 1.56s;
}
.pendulum:nth-of-type(5) {
height: 190px;
animation-duration: 1.58s;
}
.pendulum:nth-of-type(6) {
height: 200px;
animation-duration: 1.6s;
}
.pendulum:nth-of-type(7) {
height: 210px;
animation-duration: 1.62s;
}
.pendulum:nth-of-type(8) {
height: 220px;
animation-duration: 1.64s;
}
.pendulum:nth-of-type(9) {
height: 230px;
animation-duration: 1.66s;
}
.pendulum:nth-of-type(10) {
animation-duration: 1.68s;
height: 240px;
}
.pendulum:nth-of-type(11) {
animation-duration: 1.7s;
height: 250px;
}
.pendulum:nth-of-type(12) {
height: 260px;
animation-duration: 1.72s;
}
.pendulum:nth-of-type(13) {
height: 270px;
animation-duration: 1.74s;
}
.pendulum:nth-of-type(14) {
height: 280px;
animation-duration: 1.76s;
}
.pendulum:nth-of-type(15) {
height: 290px;
animation-duration: 1.78s;
}
@keyframes moveIt {
0%,
100% {
transform: translate(-50%) rotate(25deg);
}
50% {
transform: translate(-50%) rotate(-25deg);
}
}
.pendulum:before {
content: "";
position: absolute;
border-radius: 50%;
transform: translate(-50%);
left: 50%;
top: 100%;
width: 15px;
height: 15px;
background:
radial-gradient(circle at 70% 35%,
white, #66d63e 30%, #40a31d 50%);
}
.pendulum:after {
content: "";
position: absolute;
left: 50%;
transform: translate(-50%);
top: 115%;
border-radius: 50%;
filter: blur(5px);
width: 25px;
height: 3px;
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="pendulum-base">
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
</div>
</body>
</html>
|
Output:
Multiple pendulums