弹珠css3,使用CSS3实现的弹球小动画

CSS

语言：

CSSSCSS

确定

body {

background: #111;

width: 330px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -165px;

margin-top: -135px;

}

span {

width: 70px;

height: 70px;

animation: rotation 1s ease-out infinite;

-webkit-animation: rotation 1s ease-out infinite;

position: absolute;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

left: 0;

bottom: 0;

}

.circle {

border: 5px solid #31beff;

width: 70px;

height: 70px;

border-radius: 150px;

box-sizing: border-box;

animation: bounce 1s infinite;

-webkit-animation: bounce 1s infinite;

position: absolute;

z-index: 2;

top: 0;

}

.face {

width: 100%;

height: 100%;

position: absolute;

border: 5px solid #dc2114;

box-sizing: border-box;

}

.front {

-webkit-transform: translate3d(0, 0, 35px);

transform: translate3d(0, 0, 35px);

}

.top {

-webkit-transform: rotateX(90deg) translate3d(0, 0, 35px);

transform: rotateX(90deg) translate3d(0, 0, 35px);

}

.one {

animation-delay: 0s;

-webkit-animation-delay: 0s;

}

.two {

animation-delay: -1.2s;

-webkit-animation-delay: -1.2s

}

.three {

animation-delay: -1.6s;

-webkit-animation-delay: -1.6s;

}

figure {

width: 70px;

height: 200px;

position: relative;

display: inline-block;

vertical-align: top;

margin: 20px;

}

@keyframes rotation {

0% {

transform: rotateX(0deg)

}

60% {

transform: rotateX(0deg)

}

100% {

transform: rotateX(-90deg)

}

}

@-webkit-keyframes rotation {

0% {

-webkit-transform: rotateX(0deg)

}

60% {

-webkit-transform: rotateX(0deg)

}

100% {

-webkit-transform: rotateX(-90deg)

}

}

@keyframes bounce {

0% {

top: 0;

}

10% {

top: 5px;

}

20% {

width: 60px;

height: 80px;

margin-left: 5px;

}

40% {

top: 67px;

width: 80px;

height: 65px;

margin-left: -5px;

}

65% {

top: 0;

}

70% {

top: -5px;

}

}

@-webkit-keyframes bounce {

0% {

top: 0;

}

10% {

top: 5px;

}

20% {

width: 60px;

height: 80px;

margin-left: 5px;

}

40% {

top: 67px;

width: 80px;

height: 65px;

margin-left: -5px;

}

65% {

top: 0;

}

70% {

top: -5px;

}

}