<!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
纯CSS3实现带镜像倒影的机器人跳舞动画特效源码.zip （1个子文件） 
132689967700969730 
index.html 41KB资源评论
易小侠
- 粉丝: 6598
- 资源: 9万+
最新资源
- JAVAspringboot学生课程查询系统源码数据库 MySQL源码类型 WebForm
- 伯克利大学机器学习-14Optimization methods for learning [John Duchi]
- springboot4d8g9.sql
- (源码)基于SpringBoot和SpringSecurity的系统组织架构管理.zip
- JAVA的Springboot果蔬配送商城源码数据库 MySQL源码类型 WebForm
- (源码)基于C++的简单关系型数据库管理系统.zip
- (源码)基于Python和MMDetection框架的多模态目标检测系统.zip
- LitJson(0.19.0版本，适用于.NetStandard2.0 2.1)
- LitJson(0.19.0版本，适用于.NetStandard1.5)
- (源码)基于ROS的咖啡机器人控制系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
