<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3 带镜像倒影的机器人跳舞动画</title>
<style>
#bender-body {
margin: 0 auto;
height: 450px;
width: 100px;
position: relative
}
#text {
margin-top: -150px;
margin-left: -120px;
width: 120px;
top: 50%;
left: 50%;
text-transform: uppercase;
color: #BE3E1B;
font-size: 100%;
font-weight: 700;
text-shadow: -1px 1px 3px #DBC558, -1px 1px 1px #FFF38F;
text-align: center
}
div {
position: absolute;
-webkit-transform-style: preserve-3d
}
#bender-body #page {
height: 100%;
width: 100%;
-moz-perspective: 700px;
background-image: -moz-linear-gradient(left, #547489 0%, #85a0b1 50%, #547489 100%)
}
#container {
height: 300px;
width: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
-webkit-box-reflect: below -7px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(10%, transparent), to(rgba(255, 255, 255, 0.2)))
}
.foot {
bottom: 0;
width: 32px;
height: 20px
}
.foot-left {
left: 90px;
-webkit-animation: foot1 6s ease-in-out infinite;
-moz-animation: foot1 10s ease-in-out infinite
}
.foot-right {
right: 90px;
-webkit-animation: foot2 6s ease-in-out infinite;
-moz-animation: foot2 10s ease-in-out infinite
}
.leg1 {
height: 20px;
width: 12px;
background: #FF0;
bottom: 20%;
-webkit-animation: leg1 6s ease-in-out infinite;
-moz-animation: leg1 6s ease-in-out infinite;
background: #7AA6C1;
border: 1px solid #000;
border-radius: 5px;
z-index: 3
}
.first {
left: 10px
}
.next1 {
left: -1px
}
.next2 {
right: -1px
}
.leg2 {
height: 20px;
width: 12px;
background: #7AA6C1;
border: 1px solid #000;
bottom: 20%;
z-index: 3;
border-radius: 5px;
-webkit-animation: leg2 6s ease-in-out infinite;
-moz-animation: leg2 6s ease-in-out infinite
}
@-webkit-keyframes leg1 {
from {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
05% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
10% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
15% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
20% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
25% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
30% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
35% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
40% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
45% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
50% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
55% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
60% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
65% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
70% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
80% {
-webkit-transform: rotateZ(-10deg) translateY(-50%)
}
90% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
to {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
}
@-moz-keyframes leg1 {
from {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
05% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
10% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
15% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
20% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
25% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
30% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
35% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
40% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
45% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
50% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
55% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
60% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
65% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
70% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
80% {
-moz-transform: rotateZ(-10deg) translateY(-50%)
}
90% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
to {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
}
@-webkit-keyframes leg2 {
from {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
05% {
-webkit-transform: rotateZ(-10deg) translateY(-50%)
}
10% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
15% {
-webkit-transform: rotateZ(-10deg) translateY(-50%)
}
20% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
25% {
-webkit-transform: rotateZ(-10deg) translateY(-50%)
}
30% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
40% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
45% {
-webkit-transform: rotateZ(-10deg) translateY(-50%)
}
50% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
55% {
-webkit-transform: rotateZ(-10deg) translateY(-50%)
}
60% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
65% {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
70% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
80% {
-webkit-transform: rotateZ(-10deg) translateY(-50%)
}
90% {
-webkit-transform: rotateZ(10deg) translateY(-50%)
}
to {
-webkit-transform: rotateZ(0deg) translateY(-50%)
}
}
@-moz-keyframes leg2 {
from {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
05% {
-moz-transform: rotateZ(-10deg) translateY(-50%)
}
10% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
15% {
-moz-transform: rotateZ(-10deg) translateY(-50%)
}
20% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
25% {
-moz-transform: rotateZ(-10deg) translateY(-50%)
}
30% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
40% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
45% {
-moz-transform: rotateZ(-10deg) translateY(-50%)
}
50% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
55% {
-moz-transform: rotateZ(-10deg) translateY(-50%)
}
60% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
65% {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
70% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
80% {
-moz-transform: rotateZ(-10deg) translateY(-50%)
}
90% {
-moz-transform: rotateZ(10deg) translateY(-50%)
}
to {
-moz-transform: rotateZ(0deg) translateY(-50%)
}
}
@-webkit-keyframes foot1 {
from {
left: 116px
}
05% {
left: 80px
}
10% {
left: 116px
}
15% {
left: 80px
}
20% {
left: 116px
}
25% {
left: 116px
}
30% {
l
