兼容手机 css3动画,CSS3 手机动画图标

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

}

.circulo {

width: 400px;

height: 400px;

margin: 70px auto;

border-radius: 100%;

background: #b3db5b;

}

.shadow {

position: absolute;

width: 132px;

height: 30px;

border-radius: 100%;

background: #95cd41;

margin: 321px 132px;

animation: acercar 0.9s infinite alternate;

-webkit-animation: acercar 0.9s alternate infinite;

animation: acercar 0.9s infinite alternate;

-moz-animation: acercar 0.9s infinite alternate;

}

.celu {

position: absolute;

width: 121px;

height: 172px;

border-radius: 30px;

background: #7dcff7;

border-left: 21px solid #fff;

border-right: 21px solid #fff;

border-bottom: 25px solid #fff;

border-top: 50px solid #fff;

margin: 30px 116px;

animation: saltar 0.9s infinite alternate;

-webkit-animation: saltar 0.9s alternate infinite;

animation: saltar 0.9s infinite alternate;

-moz-animation: saltar 0.9s infinite alternate;

}

.celu::before {

content: "";

display: block;

width: 30px;

height: 12px;

background: #ecebeb;

margin: 180px 47px;

}

ul {

position: absolute;

display: block;

width: 121px;

height: 132px;

list-style: none;

margin: -353px 0px;

}

ul li {

display: inline-block;

width: 21px;

height: 21px;

border-radius: 6px;

}

ul li:nth-child(1) {

background: #fbb651;

margin: -80px 3px;

}

ul li:nth-child(2) {

background: #00a2eb;

margin: -80px 3px;

}

ul li:nth-child(3) {

background: #8ec31c;

margin: -80px 3px;

}

ul li:nth-child(4) {

background: #b28a51;

margin: -80px 3px;

}

ul li:nth-child(5) {

background: #fe5555;

margin: -95px 3px;

}

ul li:nth-child(6) {

background: #fff75d;

margin: -95px 3px;

}

ul li:nth-child(7) {

background: #f3939c;

margin: -95px 3px;

}

ul li:nth-child(8) {

background: #00a2eb;

margin: -95px 3px;

}

ul li:nth-child(1),

ul li:nth-child(4) {

animation: reb1 0.9s alternate infinite;

-moz-animation: reb1 0.9s alternate infinite;

-webkit-animation: reb1 0.9s alternate infinite;

-o-animation: reb1 0.9 alternate infinite;

}

ul li:nth-child(2),

ul li:nth-child(3),

ul li:nth-child(5),

ul li:nth-child(8) {

animation: reb2 0.9s alternate infinite;

-moz-animation: reb2 0.9s alternate infinite;

-webkit-animation: reb2 0.9s alternate infinite;

-o-animation: reb2 0.9s alternate infinite;

}

ul li:nth-child(6),

ul li:nth-child(7) {

animation: reb3 0.9s alternate infinite;

-moz-animation: reb3 0.9s alternate infinite;

-webkit-animation: reb3 0.9s alternate infinite;

-o-animation: reb3 0.9s alternate infinite;

}

@-webkit-keyframes saltar {

0% {

margin-top: 30px;

}

100% {

margin-top: 90px;

}

}

@-moz-keyframes saltar {

0% {

margin-top: 30px;

}

100% {

margin-top: 90px;

}

}

@keyframes saltar {

0% {

margin-top: 30px;

}

100% {

margin-top: 90px;

}

}

@-webkit-keyframes acercar {

0% {

transform: scale 0.5;

-webkit-transform: scale(0.5);

-moz-transform: scale(0.5);

-ms-transform: scale 0.5;

-o-transform: scale 0.5;

}

100% {

transform: scale 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale 1;

-o-transform: scale 1;

}

}

@-moz-keyframes acercar {

0% {

transform: scale 0.5;

-webkit-transform: scale(0.5);

-moz-transform: scale(0.5);

-ms-transform: scale 0.5;

-o-transform: scale 0.5;

}

100% {

transform: scale 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale 1;

-o-transform: scale 1;

}

}

@keyframes acercar {

0% {

transform: scale 0.5;

-webkit-transform: scale(0.5);

-moz-transform: scale(0.5);

-ms-transform: scale 0.5;

-o-transform: scale 0.5;

}

100% {

transform: scale 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale 1;

-o-transform: scale 1;

}

}

@-webkit-keyframes reb1 {

0% {

margin: -80px 3px;

}

50% {

margin: -40px 3px;

}

}

@-moz-keyframes reb1 {

0% {

margin: -80px 3px;

}

50% {

margin: -40px 3px;

}

}

@keyframes reb1 {

0% {

margin: -80px 3px;

}

50% {

margin: -40px 3px;

}

}

@-webkit-keyframes reb2 {

0% {

margin: -80px 3px;

}

50% {

margin: -85px 3px;

}

}

@-moz-keyframes reb2 {

0% {

margin: -80px 3px;

}

50% {

margin: -85px 3px;

}

}

@keyframes reb2 {

0% {

margin: -80px 3px;

}

50% {

margin: -85px 3px;

}

}

@-webkit-keyframes reb3 {

0% {

margin: -95px 3px;

}

50% {

margin: -97px 3px;

}

}

@-moz-keyframes reb3 {

0% {

margin: -95px 3px;

}

50% {

margin: -97px 3px;

}

}

@keyframes reb3 {

0% {

margin: -95px 3px;

}

50% {

margin: -97px 3px;

}

}