:doodle {
@grid: 5x1 / 8em;
@shape: circle;
}
@shape: circle;
@nth(1) { @place-cell: center; background: #f2c559; @size: calc(110% / 4 * @index()); animation-name: shine1;};
@nth(2) { @place-cell: center; background: #d69415; @size: calc(110% / 4 * @index()); animation-name: shine2;};
@nth(3) { @place-cell: center; background: #e59a27; @size: calc(100% / 4 * @index());};
@nth(4) { @place-cell: center; background: #f2740b; @size: calc(90% / 4 * @index());};
@nth(5) { @place-cell: center; background: #e36700; @size: calc(90% / 4 * @index());};
opacity: calc(1.2 - 1 / 7 * @index());
z-index: calc(5 - @index());
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: alternate;
@keyframes shine1 {
0% {
top: @rand(40,60)%; left: @rand(40,60)%;
}
100%{
top: @rand(40,60)%; left: @rand(40,60)%;
}
}
@keyframes shine2 {
0% {
top: @rand(35,65)%; left: @rand(35,65)%;
}
100%{
top: @rand(35,65)%; left: @rand(35,65)%;
}
}
:doodle {
@grid: 10x1 / 8em;
@shape: circle;
}
@shape: circle;
@nth(n+1) { @place-cell: @rand(10,90)% @rand(10,90)%; background: #46434C; @size: calc(2% * @rand(1,10)); z-index:0;};
@nth(@size()-1) { @place-cell: center; background: #EAE8FE; @size: 90%; z-index:-1;};
@nth(@size()) { @place-cell: center; background: #EAE8FE; @size: 100%; z-index:-2; opacity:0.9;animation-name: glow};
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: alternate;
@keyframes glow {
0% {
opacity: 0.9;
}
100%{
opacity: 0.3;
}
}
