<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Bouncing letter i</title>
<style>
body {
background-color: black;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.loader {
width: 5em;
height: 13em;
font-size: 10px;
display: flex;
flex-direction: column;
}
.loader::before {
content: '';
background-color: orangered;
width: 5em;
height: 5em;
border-radius: 50%;
animation: ball-jumping 1s ease-in-out infinite;
}
@keyframes ball-jumping {
20%, 80% {
transform: translateY(-2em);
}
50% {
transform: translateY(calc((8em - 5em) / 2));
}
}
.loader::after {
content: '';
width: 5em;
height: 8em;
background-color: orange;
border-radius: 0.5em;
animation: rect-rotating 1s ease-in-out infinite;
}
@keyframes rect-rotating {
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
No comments:
Post a Comment