<!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资源评论
易小侠
- 粉丝: 6624
- 资源: 9万+
最新资源
- nuget 库官方下载包，可使用解压文件打开解压使用
- 非wine、原生Linux迅雷安装包deb文件，支持Ubuntu、UOS统信、深度Deepin、LinuxMint、Debain系通用
- KUKA机器人安装包，与PROFINET软件包
- 船舶燃料消耗和二氧化碳排放分析数据集，燃料消耗和碳排放关联分析数据
- req-sign、bd-ticket-ree-public加密算法（JS）
- 全自动批量建站快速养权重站系统【纯静态html站群版】：(GPT4.0自动根据关键词写文章+自动发布+自定义友链+自动文章内链+20%页面加提权词)
- 串联式、并联式、混联式混合动力系统simulink控制策略模型(串联式、并联式、混联式每个都是独立的需要单独说拿哪个，默认是混联式RB) 有基于逻辑门限值、状态机的规则控制策略(RB)、基于等效燃油
- 法码滋.exe法码滋2.exe法码滋3.exe
- python-geohash-0.8.5-cp38-cp38-win-amd64
- Matlab根据flac、pfc或其他软件导出的坐标及应力、位移数据再现云图 案例包括导出在flac6.0中导出位移的fish代码（也可以自己先准备软件导出的坐标数据及对应点的位移或应力数据，可根据需
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
