css画球,CSS3 球体投影动画

CSS

语言：

CSSSCSS

确定

/*!

eBoot Sample

Animaciones CSS en @EscuelaIT

Joan León @nucliweb

*/

body {

background: #353535;

overflow: hidden;

}

.ebot {

position: relative;

top: 20px;

width: 343px;

height: 338px;

margin: 0 auto;

background: url(https://www.dropbox.com/s/rsqh6mjs3ou0qlo/eBoot.png?dl=1) 0 0 no-repeat;

z-index: 101;

transform: translateY(-370px);

animation: ebot 500ms ease 1.2s both, bounce 1400ms ease-out 0s infinite;

}

.ebot::before {

content: "";

position: absolute;

top: 125px;

left: 105px;

width: 123px;

height: 71px;

display: block;

background: url(https://www.dropbox.com/s/byrlwo05sa9356e/eyes.png?dl=1) 0 0 no-repeat;

animation: eyes 150ms steps(3) 1.8s both;

}

.ebot::after {

content: "";

position: relative;

top: 0;

left: 145px;

width: 31px;

height: 27px;

display: block;

background: url(https://www.dropbox.com/s/hoo4wyf4qhtezx1/ball.png?dl=1) 0 0 no-repeat;

animation: ball 450ms steps(5) both infinite;

}

.shadow {

position: absolute;

top: 450px;

width: 100%;

height: 45px;

}

.shadow::after {

content: "";

position: relative;

width: 245px;

height: 15px;

margin: 0 auto;

display: block;

border-radius: 50%;

background-color: rgba(0, 0, 0, .3);

box-shadow: 0 0 5px 20px rgba(0, 0, 0, .3);

transform: scale(0);

animation: shadow 500ms ease 1.2s both, bounce-shadow 1400ms ease-out 0s infinite;

/* eBot animation ----------------------------------- */

}

@keyframes ebot {

/* Shadow animation --------------------------------- */

to {

transform: translateY(0);

}

}

@keyframes shadow {

/* Bounce Shadow animation -------------------------- */

to {

transform: scale(0.9);

}

}

@keyframes bounce-shadow {

/* Eyes animation ----------------------------------- */

0% {

transform: scale(0.9);

}

50% {

transform: scale(1);

}

100% {

transform: scale(0.9);

}

}

@keyframes eyes {

/* Ball animation ----------------------------------- */

0% {

background-position: 0 0;

}

100% {

background-position: 0 -213px;

}

}

@keyframes ball {

/* Bounce animation --------------------------------- */

0% {

background-position: 0 0;

}

100% {

background-position: 0 -135px;

}

}

@keyframes bounce {

0%, 100% {

transform: translateY(0);

}

50% {

transform: translateY(20px);

}

}