.ellipse
 .circle
.ellipse
 .circle
.ellipse
 .circle
View Compiled
// 设置大小
$ellipse:80px;


//
$circle:$ellipse/10;
@mixin style($mod) {
    width: $mod * 2;
    height: $mod * 2;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

.ellipse {
    @include style($ellipse);
    border: 2px #555 solid;
    transform-style: preserve-3d;
    .circle {
        @include style($circle);
        background: deepskyblue;
        animation: move linear infinite;
    }
    @for $i from 1 through 3 {
        &:nth-child(#{$i}) {
            transform: rotateZ($i*2*30deg) rotateY(70deg);
            .circle {
                animation-duration: $i + s;
            }
        }
    }
}

@keyframes move {
    from {
        transform: rotateZ(0) translateX($ellipse) rotateZ(0) rotateY(-70deg);
    }
    to {
        transform: rotateZ(360deg) translateX($ellipse) rotateZ(-360deg) rotateY(-70deg);
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.