Skip to content

Instantly share code, notes, and snippets.

@Panya

Panya/test.roo

Created May 23, 2014 11:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Panya/fa74598631237c6fc5d8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Panya/fa74598631237c6fc5d8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.roo
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
html {
overflow: hidden;
&:before {
position: absolute;
top: 50%; left: 50%;
margin: -10em;
border: dashed 2px;
width: 20em; height: 20em;
border-radius: 50%;
transform: skewX(20deg);
content: '';
}
}
.boo {
position: absolute;
top: 50%; left: 50%;
margin: -1em;
width: 2em; height: 2em;
border-radius: 0 75% 75% 0 0 50% 50% 0;
background: blue;
animation: ellipse 3s linear infinite;
}
@keyframes ellipse {
from {
transform: skewX(20deg) rotate(0deg) translateY(-10em)
rotate(0deg) skewX(-20deg) rotate(0deg);
}
to {
transform: skewX(20deg) rotate(360deg) translateY(-10em)
rotate(-360deg) skewX(-20deg) rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment