loading图怎么写css,CSS3 披萨图案的LOADING动效

CSS

语言：

CSSSCSS

确定

.wrapper {

width: 100px;

height: 100px;

}

.wrapper .slice {

position: absolute;

width: 0;

height: 0;

border-left: 15px solid transparent;

border-right: 15px solid transparent;

border-top: 35px solid #FEFCC6;

top: 0%;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

visibility: hidden;

z-index: 10;

}

.wrapper .slice:before {

content: '';

position: absolute;

left: -15px;

top: -45px;

width: 30px;

height: 15px;

background: #FEFCC6;

border-radius: 100%;

border-top: 5px solid #E57A19;

z-index: -1;

}

.wrapper .slice .tomato {

background: #A30000;

position: absolute;

border-radius: 100%;

}

.wrapper .slice .tomato:nth-child(1) {

width: 10px;

height: 10px;

top: -37px;

left: 1px;

}

.wrapper .slice .tomato:nth-child(2) {

width: 7px;

height: 7px;

top: -25px;

left: -7px;

}

.wrapper .slice .olive {

background: #A30000;

position: absolute;

border-radius: 100%;

}

.wrapper .slice .olive:nth-child(3) {

width: 4px;

height: 4px;

top: -14px;

left: -1px;

}

.center {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.slice:nth-child(1) {

-webkit-animation-name: slide-in-1;

animation-name: slide-in-1;

-webkit-animation-duration: 1.2s;

animation-duration: 1.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

@-webkit-keyframes slide-in-1 {

from {

-webkit-transform: translateX(-50%) rotate(60deg) translateY(-30px);

transform: translateX(-50%) rotate(60deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(60deg) translateY(-15px);

transform: translateX(-50%) rotate(60deg) translateY(-15px);

visibility: visible;

}

}

@keyframes slide-in-1 {

from {

-webkit-transform: translateX(-50%) rotate(60deg) translateY(-30px);

transform: translateX(-50%) rotate(60deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(60deg) translateY(-15px);

transform: translateX(-50%) rotate(60deg) translateY(-15px);

visibility: visible;

}

}

.slice:nth-child(2) {

-webkit-animation-name: slide-in-2;

animation-name: slide-in-2;

-webkit-animation-duration: 1.2s;

animation-duration: 1.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-delay: 0.4s;

animation-delay: 0.4s;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

@-webkit-keyframes slide-in-2 {

from {

-webkit-transform: translateX(-50%) rotate(120deg) translateY(-30px);

transform: translateX(-50%) rotate(120deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(120deg) translateY(-15px);

transform: translateX(-50%) rotate(120deg) translateY(-15px);

visibility: visible;

}

}

@keyframes slide-in-2 {

from {

-webkit-transform: translateX(-50%) rotate(120deg) translateY(-30px);

transform: translateX(-50%) rotate(120deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(120deg) translateY(-15px);

transform: translateX(-50%) rotate(120deg) translateY(-15px);

visibility: visible;

}

}

.slice:nth-child(3) {

-webkit-animation-name: slide-in-3;

animation-name: slide-in-3;

-webkit-animation-duration: 1.2s;

animation-duration: 1.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

@-webkit-keyframes slide-in-3 {

from {

-webkit-transform: translateX(-50%) rotate(180deg) translateY(-30px);

transform: translateX(-50%) rotate(180deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(180deg) translateY(-15px);

transform: translateX(-50%) rotate(180deg) translateY(-15px);

visibility: visible;

}

}

@keyframes slide-in-3 {

from {

-webkit-transform: translateX(-50%) rotate(180deg) translateY(-30px);

transform: translateX(-50%) rotate(180deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(180deg) translateY(-15px);

transform: translateX(-50%) rotate(180deg) translateY(-15px);

visibility: visible;

}

}

.slice:nth-child(4) {

-webkit-animation-name: slide-in-4;

animation-name: slide-in-4;

-webkit-animation-duration: 1.2s;

animation-duration: 1.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-delay: 0.8s;

animation-delay: 0.8s;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

@-webkit-keyframes slide-in-4 {

from {

-webkit-transform: translateX(-50%) rotate(240deg) translateY(-30px);

transform: translateX(-50%) rotate(240deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(240deg) translateY(-15px);

transform: translateX(-50%) rotate(240deg) translateY(-15px);

visibility: visible;

}

}

@keyframes slide-in-4 {

from {

-webkit-transform: translateX(-50%) rotate(240deg) translateY(-30px);

transform: translateX(-50%) rotate(240deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(240deg) translateY(-15px);

transform: translateX(-50%) rotate(240deg) translateY(-15px);

visibility: visible;

}

}

.slice:nth-child(5) {

-webkit-animation-name: slide-in-5;

animation-name: slide-in-5;

-webkit-animation-duration: 1.2s;

animation-duration: 1.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-delay: 1s;

animation-delay: 1s;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

@-webkit-keyframes slide-in-5 {

from {

-webkit-transform: translateX(-50%) rotate(300deg) translateY(-30px);

transform: translateX(-50%) rotate(300deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(300deg) translateY(-15px);

transform: translateX(-50%) rotate(300deg) translateY(-15px);

visibility: visible;

}

}

@keyframes slide-in-5 {

from {

-webkit-transform: translateX(-50%) rotate(300deg) translateY(-30px);

transform: translateX(-50%) rotate(300deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(300deg) translateY(-15px);

transform: translateX(-50%) rotate(300deg) translateY(-15px);

visibility: visible;

}

}

.slice:nth-child(6) {

-webkit-animation-name: slide-in-6;

animation-name: slide-in-6;

-webkit-animation-duration: 1.2s;

animation-duration: 1.2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-delay: 1.2s;

animation-delay: 1.2s;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

@-webkit-keyframes slide-in-6 {

from {

-webkit-transform: translateX(-50%) rotate(360deg) translateY(-30px);

transform: translateX(-50%) rotate(360deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(360deg) translateY(-15px);

transform: translateX(-50%) rotate(360deg) translateY(-15px);

visibility: visible;

}

}

@keyframes slide-in-6 {

from {

-webkit-transform: translateX(-50%) rotate(360deg) translateY(-30px);

transform: translateX(-50%) rotate(360deg) translateY(-30px);

visibility: visible;

}

to {

-webkit-transform: translateX(-50%) rotate(360deg) translateY(-15px);

transform: translateX(-50%) rotate(360deg) translateY(-15px);

visibility: visible;

}

}