180 lines
4.9 KiB
HTML
180 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!--
|
|
Code mostly taken from:
|
|
https://www.geeksforgeeks.org/multiple-pendulum-animation-using-css/
|
|
Unbelievable, geeksforgeeks actually producing quality content for once?
|
|
|
|
I adjusted the numbers based on this demo:
|
|
https://sciencedemonstrations.fas.harvard.edu/presentations/pendulum-waves
|
|
Also, the lengths are physically accurate (assuming pendulums obey simple harmonic motion which they pretty much do at small angles)
|
|
Technically, the angle should vary as a cosine function (assuming the small-angle approximation), but due to CSS limitations it's instead a linear function
|
|
Using a piecewise linear function for the animation would be more accurate, but no one can really tell the difference anyways
|
|
-->
|
|
|
|
<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: calc(1000000px / 65 / 65);
|
|
background: #b5ff9a;
|
|
animation: moveIt calc(60s / 65) ease-in-out infinite;
|
|
transform-origin: 50% 0;
|
|
}
|
|
|
|
.pendulum:nth-of-type(2) {
|
|
height: calc(1000000px / 64 / 64);
|
|
animation-duration: calc(60s / 64);
|
|
}
|
|
|
|
.pendulum:nth-of-type(3) {
|
|
height: calc(1000000px / 63 / 63);
|
|
animation-duration: calc(60s / 63);
|
|
}
|
|
|
|
.pendulum:nth-of-type(4) {
|
|
height: calc(1000000px / 62 / 62);
|
|
animation-duration: calc(60s / 62);
|
|
}
|
|
|
|
.pendulum:nth-of-type(5) {
|
|
height: calc(1000000px / 61 / 61);
|
|
animation-duration: calc(60s / 61);
|
|
}
|
|
|
|
.pendulum:nth-of-type(6) {
|
|
height: calc(1000000px / 60 / 60);
|
|
animation-duration: calc(60s / 60);
|
|
}
|
|
|
|
.pendulum:nth-of-type(7) {
|
|
height: calc(1000000px / 59 / 59);
|
|
animation-duration: calc(60s / 59);
|
|
}
|
|
|
|
.pendulum:nth-of-type(8) {
|
|
height: calc(1000000px / 58 / 58);
|
|
animation-duration: calc(60s / 58);
|
|
}
|
|
|
|
.pendulum:nth-of-type(9) {
|
|
height: calc(1000000px / 57 / 57);
|
|
animation-duration: calc(60s / 57);
|
|
}
|
|
|
|
.pendulum:nth-of-type(10) {
|
|
height: calc(1000000px / 56 / 56);
|
|
animation-duration: calc(60s / 56);
|
|
}
|
|
|
|
.pendulum:nth-of-type(11) {
|
|
height: calc(1000000px / 55 / 55);
|
|
animation-duration: calc(60s / 55);
|
|
}
|
|
|
|
.pendulum:nth-of-type(12) {
|
|
height: calc(1000000px / 54 / 54);
|
|
animation-duration: calc(60s / 54);
|
|
}
|
|
|
|
.pendulum:nth-of-type(13) {
|
|
height: calc(1000000px / 53 / 53);
|
|
animation-duration: calc(60s / 53);
|
|
}
|
|
|
|
.pendulum:nth-of-type(14) {
|
|
height: calc(1000000px / 52 / 52);
|
|
animation-duration: calc(60s / 52);
|
|
}
|
|
|
|
.pendulum:nth-of-type(15) {
|
|
height: calc(1000000px / 51 / 51);
|
|
animation-duration: calc(60s / 51);
|
|
}
|
|
|
|
@keyframes moveIt {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translate(-50%) rotate(30deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-50%) rotate(-30deg);
|
|
}
|
|
}
|
|
|
|
.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>
|