Animasi guna CSS tulen.
Demo
HTML view ▼
<div class="alahai">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
<div class="layer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.alahai {
margin: 0;
width: 100%;
height: 340px;
display: grid;
place-items: center;
overflow: hidden;
}
.layer {
transform: rotate(45deg);
width: min(50vw, 58vh);
aspect-ratio: 1 / 1;
background-color: hsla(0deg, 0%, 0%, 10%);
position: relative;
animation:
10s spin infinite ease-in-out alternate;
overflow: hidden;
border-radius: 100% 0;
}
.layer > .layer {
top: calc(50% + var(--posY));
left: calc(50% + var(--posX));
width: 90%;
height: 90%;
transform: translate(-50%, -50%) rotate(var(--rot));
}
@property --rot {
syntax: "<angle>";
inherits: true;
initial-value: 3deg;
}
@property --posX {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
@property --posY {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
@keyframes spin {
0% { --rot: -32deg; }
100% { --rot: 32deg; }
}
@keyframes move {
0%, 100% {
--posX: 0%;
--posY: 0%;
}
20% {
--posX: -5%;
--posY: -5%;
}
40% {
--posX: 5%;
--posY: -5%;
}
60% {
--posX: 5%;
--posY: 5%;
}
80% {
--posX: -5%;
--posY: 5%;
}
}
</style>
Ulasan