css小球落地阴影,CSS3球体掉落动画带阴影效果

CSS

语言：

CSSSCSS

确定

#zhuti {

height: 500px;

width: 600px;

background-image: url(/uploads/user_upload/46900/001.jpg);

background-repeat: no-repeat;

background-size: 100% 100%;

}

#qq {

height: 100px;

width: 100px;

margin: 0 auto;

background-image: url(/uploads/user_upload/46900/002.jpg);

border-radius: 50%;

background-size: 100px;

/* background-position: 50% 50%; */

animation: kk 5s infinite linear;

}

footer {

width: 70px;

height: 70px;

border-radius: 50%;

background-color: black;

opacity: 0.5;

position: absolute;

bottom: 210px;

margin: 0 auto;

transform: rotateX(70deg);

left: 285px;

filter: blur(5px);

animation: yinying 5s infinite linear;

}

@keyframes kk {

0% {

transform: translateY(0);

}

20% {

transfrom: translateY(150px);

}

40% {

transform: translateY(300px);

}

60% {

transform: translateY(150px);

}

80% {

transform: translateY(255px);

}

100% {

transform: translateY(300px);

}

}

@keyframes yinying {

0% {

width: 20px;

height: 20px;

}

20% {

width: 70px;

height: 70px;

}

40% {

width: 35px;

height: 35px;

}

60% {

width: 70px;

height: 70px;

}

80% {

width: 55px;

height: 55px;

}

100% {

width: 70px;

height: 70px;

}

}