:doodle {
@grid: 25x1 / 28vmin;
}
:container {
perspective: 55vmin;
}
@place-cell: center;
@size: 100%;
border: @r(3px) solid @pd(
#777777, #e95513, #999999, #CCCCCC
);
@random(.1) { border-style: dashed; }
@random(.1) { border-style: dotted; }
@random(.1) {
border-width: @p(3px, 4px);
border-style: double;
}
border-radius: 150%;
transform-style: preserve-3d;
will-change: transform, opacity;
animation: scale-up 20s linear infinite;
animation-delay: calc(-20s / @size() * @i());
@keyframes scale-up {
0%, 100% {
transform: translate3d(0, 0, 0) rotate(0);
opacity: 0;
}
10% {
opacity: 1;
}
95% {
transform:
translate3d(0, 0, 45vmin)
rotateX(calc(@p(-1, 1) * @r(30deg, 330deg)))
rotateY(calc(@p(-1, 1) * @r(30deg, 330deg)))
rotateZ(calc(@p(-1, 1) * @r(30deg, 330deg)))
}
}
