summaryrefslogtreecommitdiff
path: root/pendulum.html
diff options
context:
space:
mode:
Diffstat (limited to 'pendulum.html')
-rw-r--r--pendulum.html315
1 files changed, 152 insertions, 163 deletions
diff --git a/pendulum.html b/pendulum.html
index 479c502..2261bd7 100644
--- a/pendulum.html
+++ b/pendulum.html
@@ -13,167 +13,156 @@ Using a piecewise linear function for the animation would be more accurate, but
-->
<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>
-
+ <head>
+ <meta charset="utf-8">
+ <title>pendulum</title>
+ <style>
+ *,
+ *:before,
+ *:after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ .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>
generated by cgit v1.2.3-70-g09d2 (git 2.47.1) at 2024-12-22 19:19:10 +0000