Dernière modification : juin 2022

Le code :
<css-doodle grid="20">
:doodle {
@grid: 20 / 100vmax;
background: white;
--anim: @rand(20s, 40s);
}
@shape: circle;
background: hsla(@rand(100, 250), 100%, 69%, @rand(0.6));
transform:
scale(@rand(.2, 1.2))
translate(
@rand(-50%, 50%), @rand(-50%, 50%)
);
animation: rotation var(--anim) linear infinite alternate;
@keyframes rotation {
0% { transform: scale(@rand(.2, 1.2)) translate(
@rand(-50%, 50%), @rand(-50%, 50%)) }
25% { transform: scale(@rand(.4, 1.4)) translate(
@rand(-50%, 50%), @rand(-50%, 50%))}
50% {
transform: scale(@rand(.2, 1.2)) translate(
@rand(-50%, 50%), @rand(-50%, 50%)) ;
}
75% { transform: scale(@rand(.2, .8)) translate(
@rand(-50%, 50%), @rand(-50%, 50%)) }
100% {
transform: scale(@rand(1, 2)) translate(
@rand(-50%, 50%), @rand(-50%, 50%))
}
}
</css-doodle>
<script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.28.1/css-doodle.min.js'></script>