mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 16:21:29 +00:00
104 lines
2.7 KiB
HTML
104 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<style>
|
|
.ball-container {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 400px;
|
|
}
|
|
.box {
|
|
position: absolute;
|
|
left: 300px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: blue;
|
|
border-radius: 10px;
|
|
}
|
|
#box1 {
|
|
top: 50px;
|
|
}
|
|
#box2 {
|
|
top: 300px;
|
|
}
|
|
|
|
#box3 {
|
|
position: absolute;
|
|
left: 550px;
|
|
width: 200px;
|
|
height: 200px;
|
|
top: 50px;
|
|
overflow: hidden;
|
|
}
|
|
#box3-inner {
|
|
width: 200px;
|
|
height: 450px;
|
|
background-color: blue;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#box4 {
|
|
height: 50px;
|
|
top: 600px;
|
|
left: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg viewBox="0 0 100 200" class="ball-container">
|
|
<circle id="ball0" class="ball" cx="50" cy="50" r="50" fill="rgb(220, 105, 105)"></circle>
|
|
<circle id="ball1" class="ball" cx="50" cy="40" r="40" fill="rgb(200, 90, 90)"></circle>
|
|
<circle id="ball2" class="ball" cx="50" cy="30" r="30" fill="rgb(180, 75, 75)"></circle>
|
|
<circle id="ball3" class="ball" cx="50" cy="20" r="20" fill="rgb(160, 60, 60)"></circle>
|
|
<circle id="ball4" class="ball" cx="50" cy="10" r="10" fill="rgb(140, 45, 45)"></circle>
|
|
<rect x="0" y="197" width="100" height="3" fill="black"></rect>
|
|
</svg>
|
|
<div class="box" id="box1"></div>
|
|
<div class="box" id="box2"></div>
|
|
<div id="box3">
|
|
<div id="box3-inner"></div>
|
|
</div>
|
|
<div class="box" id="box4"></div>
|
|
<script>
|
|
for (let i = 0; i < 5; i++) {
|
|
const ball = document.getElementById(`ball${i}`);
|
|
ball.animate([
|
|
{ transform: "translateY(0px)" },
|
|
{ transform: `translateY(${100 + 20 * i}px)` },
|
|
{ transform: "translateY(0px)" },
|
|
], {
|
|
duration: 1000,
|
|
iterations: Infinity,
|
|
easing: "ease-in-out"
|
|
});
|
|
}
|
|
|
|
box1.animate({ backgroundColor: ["red"] }, {
|
|
duration: 2000,
|
|
iterations: Infinity,
|
|
direction: "alternate"
|
|
});
|
|
|
|
box2.animate({ opacity: [0] }, {
|
|
duration: 2000,
|
|
iterations: Infinity,
|
|
direction: "alternate",
|
|
});
|
|
|
|
// Discrete property animation
|
|
box3.animate({ overflow: ["visible"] }, {
|
|
duration: 2000,
|
|
iterations: Infinity,
|
|
direction: "alternate",
|
|
});
|
|
|
|
box4.animate([
|
|
{ transform: "none" },
|
|
{ transform: "translateX(400px) rotate3d(1, 1, 0, 50deg)" },
|
|
], {
|
|
duration: 2000,
|
|
iterations: Infinity,
|
|
direction: "alternate"
|
|
});
|
|
</script>
|
|
</body>
|