SCSS
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #F7FFF7;
}
.wrapper {
position: relative;
width: 30vmin;
height: 30vmin;
border-radius: 50%;
}
.leaf {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border-bottom-right-radius: 0%;
will-change: transform;
}
$background-color: #222;
$lighten: 0%;
$deg: 0deg;
@for $i from 10 through 1 {
@keyframes leaf-#{$i} {
0%,
20% {
transform: rotate(0deg) translate(0%, 0%);
}
80%,
100% {
transform: rotate($deg) translate(30%, 30%);
}
}
.leaf:nth-of-type(#{$i}) {
background-color: lighten($background-color, $lighten);
animation: leaf-#{$i} 2s ease-in-out infinite alternate;
}
$lighten: $lighten + 7.5%;
$deg: $deg + (360deg / 10);
}
