HTML5 CSS3在球形表面运动的彩色圆形元素

Circles in Sphere Loader，学习如何实现把html元素布局到3d球形上。

css3, loader

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3368
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.holder {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: #333;
}
.circles-preloader {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: rotatePreloader 10s infinite linear;
}
@keyframes rotatePreloader {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
    }
}
.circles-preloader .circles {
    position: absolute;
    width: 50%;
    height: 10%;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
    perspective: 150px;
}
.circles-preloader .circles-in {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(0deg) translateZ(75px);
    transition: transform 2s;
    animation-name: stripeRotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes stripeRotate {
    0% {
        transform: rotateY(0deg) translateZ(75px);
    }
    100% {
        transform: rotateY(360deg) translateZ(75px);
    }
}
.circles-preloader .circles:nth-child(1) {
    transform: translateX(-50%) translateY(-50%) rotateZ(36deg);
    z-index: 9;
}
.circles-preloader .circles:nth-child(1) .circles-in {
    animation-duration: 1s;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(1) {
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 28%;
    top: 46%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(2) {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 51%;
    top: 69%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(3) {
    width: 26px;
    height: 26px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 12%;
    top: 86%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(4) {
    width: 31px;
    height: 31px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 80%;
    top: 35%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #B1DCBE;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(5) {
    width: 3px;
    height: 3px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 20%;
    top: 59%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #B1DCBE;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(6) {
    width: 3px;
    height: 3px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 80%;
    top: 9%;
    animation: stripeRotateCircle 1.4s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #A2FFD5;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(7) {
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 29%;
    top: 45%;
    animation: stripeRotateCircle 2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(8) {
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 36%;
    top: 77%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(9) {
    width: 31px;
    height: 31px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 32%;
    top: 11%;
    animation: stripeRotateCircle 1.6s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(1) .circles-in div:nth-child(10) {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 98%;
    top: 83%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(2) {
    transform: translateX(-50%) translateY(-50%) rotateZ(72deg);
    z-index: 8;
}
.circles-preloader .circles:nth-child(2) .circles-in {
    animation-duration: 2s;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(1) {
    width: 22px;
    height: 22px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 92%;
    top: 70%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(2) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 45%;
    animation: stripeRotateCircle 1.4s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(3) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 39%;
    top: 26%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(4) {
    width: 3px;
    height: 3px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 87%;
    top: 11%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(5) {
    width: 19px;
    height: 19px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 16%;
    top: 88%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #B1DCBE;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(6) {
    width: 21px;
    height: 21px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 67%;
    top: 48%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(7) {
    width: 18px;
    height: 18px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 25%;
    top: 64%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(8) {
    width: 29px;
    height: 29px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 36%;
    top: 16%;
    animation: stripeRotateCircle 1.6s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(9) {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 63%;
    top: 49%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(2) .circles-in div:nth-child(10) {
    width: 4px;
    height: 4px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 26%;
    top: 23%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(3) {
    transform: translateX(-50%) translateY(-50%) rotateZ(108deg);
    z-index: 7;
}
.circles-preloader .circles:nth-child(3) .circles-in {
    animation-duration: 3s;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(1) {
    width: 19px;
    height: 19px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 53%;
    top: 2%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(2) {
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 27%;
    top: 85%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(3) {
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 18%;
    top: 27%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(4) {
    width: 24px;
    height: 24px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 78%;
    top: 27%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(5) {
    width: 31px;
    height: 31px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 90%;
    top: 64%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(6) {
    width: 23px;
    height: 23px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 41%;
    top: 1%;
    animation: stripeRotateCircle 1.6s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(7) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 83%;
    top: 62%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(8) {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 1%;
    top: 84%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(9) {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 39%;
    top: 40%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(3) .circles-in div:nth-child(10) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 54%;
    top: 95%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(4) {
    transform: translateX(-50%) translateY(-50%) rotateZ(144deg);
    z-index: 6;
}
.circles-preloader .circles:nth-child(4) .circles-in {
    animation-duration: 4s;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(1) {
    width: 17px;
    height: 17px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 87%;
    top: 23%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(2) {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 55%;
    top: 51%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(3) {
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 57%;
    top: 81%;
    animation: stripeRotateCircle 1.4s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(4) {
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 38%;
    top: 25%;
    animation: stripeRotateCircle 2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(5) {
    width: 16px;
    height: 16px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 40%;
    top: 81%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(6) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 70%;
    top: 88%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(7) {
    width: 22px;
    height: 22px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 33%;
    top: 53%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(8) {
    width: 18px;
    height: 18px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 52%;
    top: 77%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(9) {
    width: 29px;
    height: 29px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 73%;
    top: 58%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(4) .circles-in div:nth-child(10) {
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 59%;
    top: 83%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(5) {
    transform: translateX(-50%) translateY(-50%) rotateZ(180deg);
    z-index: 5;
}
.circles-preloader .circles:nth-child(5) .circles-in {
    animation-duration: 5s;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(1) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 3%;
    top: 14%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(2) {
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 24%;
    top: 92%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(3) {
    width: 21px;
    height: 21px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 55%;
    top: 29%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(4) {
    width: 22px;
    height: 22px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 98%;
    top: 76%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(5) {
    width: 22px;
    height: 22px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 10%;
    top: 32%;
    animation: stripeRotateCircle 1.4s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(6) {
    width: 19px;
    height: 19px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 21%;
    top: 81%;
    animation: stripeRotateCircle 1.6s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(7) {
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 31%;
    top: 39%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(8) {
    width: 17px;
    height: 17px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 41%;
    top: 68%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(9) {
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 72%;
    top: 80%;
    animation: stripeRotateCircle 1.4s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(5) .circles-in div:nth-child(10) {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 94%;
    top: 15%;
    animation: stripeRotateCircle 2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(6) {
    transform: translateX(-50%) translateY(-50%) rotateZ(216deg);
    z-index: 4;
}
.circles-preloader .circles:nth-child(6) .circles-in {
    animation-duration: 6s;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(1) {
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 82%;
    top: 61%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(2) {
    width: 24px;
    height: 24px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 20%;
    top: 26%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #A2FFD5;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(3) {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 74%;
    top: 13%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(4) {
    width: 28px;
    height: 28px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 100%;
    top: 51%;
    animation: stripeRotateCircle 1.4s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(5) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 88%;
    top: 5%;
    animation: stripeRotateCircle 1.6s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(6) {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 10%;
    top: 81%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(7) {
    width: 29px;
    height: 29px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 32%;
    top: 16%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(8) {
    width: 11px;
    height: 11px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 2%;
    top: 49%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(9) {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 35%;
    top: 48%;
    animation: stripeRotateCircle 2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(6) .circles-in div:nth-child(10) {
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 15%;
    top: 13%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(7) {
    transform: translateX(-50%) translateY(-50%) rotateZ(252deg);
    z-index: 3;
}
.circles-preloader .circles:nth-child(7) .circles-in {
    animation-duration: 7s;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(1) {
    width: 21px;
    height: 21px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 42%;
    top: 64%;
    animation: stripeRotateCircle 1.4s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(2) {
    width: 29px;
    height: 29px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 6%;
    top: 94%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(3) {
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 76%;
    top: 94%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(4) {
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 69%;
    top: 15%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(5) {
    width: 25px;
    height: 25px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 76%;
    top: 59%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #B1DCBE;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(6) {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 27%;
    top: 88%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(7) {
    width: 19px;
    height: 19px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 80%;
    top: 5%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(8) {
    width: 23px;
    height: 23px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 83%;
    top: 56%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(9) {
    width: 3px;
    height: 3px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 43%;
    top: 32%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(7) .circles-in div:nth-child(10) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 62%;
    top: 24%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(8) {
    transform: translateX(-50%) translateY(-50%) rotateZ(288deg);
    z-index: 2;
}
.circles-preloader .circles:nth-child(8) .circles-in {
    animation-duration: 8s;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(1) {
    width: 31px;
    height: 31px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 98%;
    top: 26%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(2) {
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 60%;
    top: 86%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(3) {
    width: 22px;
    height: 22px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 30%;
    top: 96%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(4) {
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 95%;
    top: 45%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(5) {
    width: 25px;
    height: 25px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 78%;
    top: 82%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(6) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 2%;
    top: 32%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #A2FFD5;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(7) {
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 41%;
    top: 24%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(8) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 98%;
    top: 16%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(9) {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 59%;
    top: 3%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(8) .circles-in div:nth-child(10) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 28%;
    top: 2%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(9) {
    transform: translateX(-50%) translateY(-50%) rotateZ(324deg);
    z-index: 1;
}
.circles-preloader .circles:nth-child(9) .circles-in {
    animation-duration: 9s;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(1) {
    width: 16px;
    height: 16px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 63%;
    top: 14%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(2) {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 67%;
    top: 54%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #A2FFD5;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(3) {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 85%;
    top: 54%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #B1DCBE;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(4) {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 85%;
    top: 2%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(5) {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 3%;
    top: 30%;
    animation: stripeRotateCircle 1.5s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #A2FFD5;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(6) {
    width: 17px;
    height: 17px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 82%;
    top: 68%;
    animation: stripeRotateCircle 2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF0850;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(7) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 63%;
    top: 14%;
    animation: stripeRotateCircle 1.6s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #A2FFD5;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(8) {
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 5%;
    top: 57%;
    animation: stripeRotateCircle 1.6s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(9) {
    width: 18px;
    height: 18px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 94%;
    top: 93%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(9) .circles-in div:nth-child(10) {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 16%;
    top: 51%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(10) {
    transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
    z-index: 0;
}
.circles-preloader .circles:nth-child(10) .circles-in {
    animation-duration: 10s;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(1) {
    width: 32px;
    height: 32px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 92%;
    top: 93%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(2) {
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 85%;
    top: 78%;
    animation: stripeRotateCircle 1.1s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #6DC1B3;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(3) {
    width: 31px;
    height: 31px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 42%;
    top: 71%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #81DDC6;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(4) {
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 93%;
    top: 1%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #F3FFBA;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(5) {
    width: 32px;
    height: 32px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 40%;
    top: 71%;
    animation: stripeRotateCircle 1.3s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #B1DCBE;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(6) {
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 39%;
    top: 99%;
    animation: stripeRotateCircle 1.7s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FF6768;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(7) {
    width: 17px;
    height: 17px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 69%;
    top: 91%;
    animation: stripeRotateCircle 1.9s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(8) {
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 5%;
    top: 91%;
    animation: stripeRotateCircle 1.2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(9) {
    width: 27px;
    height: 27px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 62%;
    top: 76%;
    animation: stripeRotateCircle 2s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFFFFF;
}
.circles-preloader .circles:nth-child(10) .circles-in div:nth-child(10) {
    width: 31px;
    height: 31px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 5%;
    top: 19%;
    animation: stripeRotateCircle 1.8s infinite linear;
    transform: rotateX(0deg) translateZ(15px);
    background-color: #FFA69C;
}
@keyframes stripeRotateCircle {
    0% {
        transform: rotateX(0deg) translateZ(15px);
    }
    100% {
        transform: rotateX(360deg) translateZ(15px);
    }
}

HTML

Circles in Sphere Loader，学习如何实现把html元素布局到3d球形上。

css3, loader

编辑器支持Emmet

快捷键

Circles in Sphere Loader，学习如何实现把html元素布局到3d球形上。

css3, loader

HTML5 CSS3如何制作带内容预览和运动悬停动效的网格布局

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：