css3小球坠落,CSS3 圆球体内的小球碰撞运动

CSS

语言：

CSSSCSS

确定

body {

background: #f9fbe7;

}

.wrapper {

position: absolute;

top: 50%;

left: 50%;

width: 10rem;

height: 10rem;

margin-top: -5rem;

margin-left: -5rem;

background: #bbdefb;

border-radius: 100%;

}

.circle-container {

position: absolute;

top: 0;

left: 50%;

width: 1rem;

height: 10rem;

margin-left: -0.5rem;

-webkit-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

transform-origin: 50% 50%;

}

.circle-container:before {

position: absolute;

top: 0;

left: 0;

content: '';

width: 1rem;

height: 1rem;

background: #fff3e0;

border-radius: 50%;

}

@-webkit-keyframes there-back {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

50% {

-webkit-transform: translateY(9rem);

transform: translateY(9rem);

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

}

@keyframes there-back {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

50% {

-webkit-transform: translateY(9rem);

transform: translateY(9rem);

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

}

.circle-container-0 {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-container-0:before {

-webkit-animation: there-back 2s infinite 0s ease-in-out;

animation: there-back 2s infinite 0s ease-in-out;

}

.circle-container-1 {

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.circle-container-1:before {

-webkit-animation: there-back 2s infinite 0.1s ease-in-out;

animation: there-back 2s infinite 0.1s ease-in-out;

}

.circle-container-2 {

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

}

.circle-container-2:before {

-webkit-animation: there-back 2s infinite 0.2s ease-in-out;

animation: there-back 2s infinite 0.2s ease-in-out;

}

.circle-container-3 {

-webkit-transform: rotate(135deg);

-ms-transform: rotate(135deg);

transform: rotate(135deg);

}

.circle-container-3:before {

-webkit-animation: there-back 2s infinite 0.3s ease-in-out;

animation: there-back 2s infinite 0.3s ease-in-out;

}

.circle-container-4 {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}

.circle-container-4:before {

-webkit-animation: there-back 2s infinite 0.4s ease-in-out;

animation: there-back 2s infinite 0.4s ease-in-out;

}

.circle-container-5 {

-webkit-transform: rotate(225deg);

-ms-transform: rotate(225deg);

transform: rotate(225deg);

}

.circle-container-5:before {

-webkit-animation: there-back 2s infinite 0.5s ease-in-out;

animation: there-back 2s infinite 0.5s ease-in-out;

}

.circle-container-6 {

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);

}

.circle-container-6:before {

-webkit-animation: there-back 2s infinite 0.6s ease-in-out;

animation: there-back 2s infinite 0.6s ease-in-out;

}

.circle-container-7 {

-webkit-transform: rotate(315deg);

-ms-transform: rotate(315deg);

transform: rotate(315deg);

}

.circle-container-7:before {

-webkit-animation: there-back 2s infinite 0.7s ease-in-out;

animation: there-back 2s infinite 0.7s ease-in-out;

}

.circle-container-8 {

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

.circle-container-8:before {

-webkit-animation: there-back 2s infinite 0.8s ease-in-out;

animation: there-back 2s infinite 0.8s ease-in-out;

}