Malleys,
я пыталась сегодня что-то сделать часов девять, но результата ноль, где и что не так не могу понять
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
@import "compass/css3"; $g: 9.8; $l: 1; $beats: 10; $T: 2 * pi() * sqrt($l/$g);
.mathematics_pendulum { width: 930px; height: 500px; background: -webkit-linear-gradient(top, #ade6ad, #e6e6cc); background: -moz-linear-gradient(top, #ade6ad, #e6e6cc); background: -o-linear-gradient(top, #ade6ad, #e6e6cc); background: linear-gradient(to top, #ade6ad, #e6e6cc); -webkit-border-radius: 50px/35px; border-radius: 50px/35px; border: 1px solid #c0c0c0; position: absolute; }
#still_point { display: inline-block; width: 1px; height: 1px; background: transparent; border: 45px solid transparent; border-top-color: #000080; position: absolute; left: 420px; }
#pendulum { width: 75px; height: 400px; display: inline-block; position: absolute; top: 45px; left: 428px; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: pendulum #{0.5 * $T * $beats}s cubic-bezier(0.36, 0, 0.64, 1) forwards; animation: pendulum #{0.5 * $T * $beats}s cubic-bezier(0.36, 0, 0.64, 1) forwards; }
#pendulum_rod { width: 3px; height: 325px; background: #999; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; position: absolute; left: 36px; }
#point_pendulum { width: 75px; height: 75px; display: inline-block; -webkit-border-radius: 50%; border-radius: 50%; background: -webkit-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: -o-radial-gradient(60% 40%, circle, #bfbfff, #00f); background: radial-gradient(circle at 60% 40%, #bfbfff, #00f); position: absolute; top: 325px; }
@-webkit-keyframes pendulum { @for $k from 0 to ($beats + 1) { $t: 0.5 * $k * $T; $θ: 0.5 * pi() * cos(sqrt($g / $l) * $t)$f: pow(e(), -0.25 / pi() * $t * $t); #{100% * $k / $beats} { transform: rotate(#{$f * $θ}rad); } } } @keyframes pendulum { @for $k from 0 to ($beats + 1) { $t: 0.5 * $k * $T; $θ: 0.5 * pi() * cos(sqrt($g / $l) * $t)$f: pow(e(), -0.25 / pi() * $t * $t); #{100% * $k / $beats} { transform: rotate(#{$f * $θ}rad); } } }
</style>
</head>
</head>
<body>
<button class="mathematics_pendulum"></button>
<div class="mathematics_pendulum">
<span id="still_point"></span>
<span id="pendulum">
<span id="pendulum_rod"></span>
<span id="point_pendulum"></span>
</span>
</div>
<script>
addEventListener("click", ({ target }) => { if(target.matches(".mathematics_pendulum")) { const { parentNode } = target; parentNode.replaceChild(target, target); } } );
</script>
</body>
</html>