<!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>
/*********** Blue Bot! ********/
@keyframes blue-lower-dot1 {
0% {
background: #2497b4;
}
50% {
background: #e33568;
}
100% {
background: #2497b4;
}
}
@keyframes blue-lower-dot2 {
0% {
background: #e33568;
}
50% {
background: #2497b4;
}
100% {
background: #e33568;
}
}
@keyframes blue-lower-dot3 {
0% {
background: #2497b4;
}
50% {
background: #e33568;
}
100% {
background: #2497b4;
}
}
@keyframes blue-mid-dot1 {
0% {
background: #e33568;
}
50% {
background: #2497b4;
}
100% {
background: #e33568;
}
}
@keyframes blue-mid-dot2 {
0% {
background: #2497b4;
}
50% {
background: #e33568;
}
100% {
background: #2497b4;
}
}
@keyframes blue-mid-dot3 {
0% {
background: #e33568;
}
50% {
background: #2497b4;
}
100% {
background: #e33568;
}
}
@keyframes blue-wheel-line1 {
0% {
background: #3f3f3f;
}
50% {
background: #2497b4;
}
100% {
background: #3f3f3f;
}
}
@keyframes blue-wheel-line2 {
0% {
background: #3f3f3f;
}
50% {
background: #2497b4;
}
100% {
background: #3f3f3f;
}
}
@keyframes blue-wheel-line3 {
0% {
background: #3f3f3f;
}
50% {
background: #2497b4;
}
100% {
background: #3f3f3f;
}
}
@keyframes blue-wheel-line4 {
0% {
background: #3f3f3f;
}
50% {
background: #2497b4;
}
100% {
background: #3f3f3f;
}
}
@keyframes blue-eye {
0% {
top: 165px;
left: 217px;
}
25% {
top: 167px;
left: 219px;
}
50% {
top: 165px;
left: 221px;
}
75% {
top: 167px;
left: 219px;
}
100% {
top: 165px;
left: 217px;
}
}
@keyframes blue-top-box {
0% {
top: 195px;
left: 200px;
}
50% {
top: 195px;
left: 292px;
}
100% {
top: 195px;
left: 200px;
}
}
.blue-right-wheel {
position: fixed;
width: 50px;
height: 30px;
top: 280px;
left: 290px;
z-index: 5;
border: 5px solid #3f3f3f;
background: #2497b4;
border-radius: 25px;
}
.blue-right-wheel-line {
position: fixed;
width: 30px;
height: 5px;
top: 297px;
left: 305px;
background: #3f3f3f;
}
.blue-wheel-front {
position: fixed;
width: 170px;
height: 30px;
top: 280px;
left: 170px;
z-index: 3;
border: 5px solid #3f3f3f;
background: #54c8ef;
border-radius: 25px;
overflow: hidden;
}
.blue-wheel-outline {
position: fixed;
width: 170px;
height: 30px;
top: 280px;
left: 170px;
z-index: 3;
border: 5px solid #3f3f3f;
border-radius: 25px;
overflow: hidden;
}
.blue-wheel-shade {
position: fixed;
width: 150px;
height: 14px;
top: 301px;
left: 175px;
z-index: -2;
background: #2497b4;
border-bottom-left-radius: 25px;
}
.blue-wheel-line1 {
position: fixed;
width: 120px;
height: 5px;
top: 308px;
left: 175px;
z-index: -1;
background: #3f3f3f;
animation-name: blue-wheel-line1;
animation-duration: 300ms;
animation-delay: 300ms;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-wheel-line2 {
position: fixed;
width: 120px;
height: 5px;
top: 301px;
left: 175px;
z-index: -1;
background: #3f3f3f;
animation-name: blue-wheel-line2;
animation-duration: 300ms;
animation-delay: 200ms;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-wheel-line3 {
position: fixed;
width: 120px;
height: 5px;
top: 294px;
left: 175px;
z-index: -1;
background: #3f3f3f;
animation-name: blue-wheel-line3;
animation-duration: 300ms;
animation-delay: 100ms;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-wheel-line4 {
position: fixed;
width: 120px;
height: 5px;
top: 287px;
left: 175px;
z-index: -1;
background: #3f3f3f;
animation-name: blue-wheel-line4;
animation-duration: 300ms;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-body {
position: fixed;
width: 110px;
height: 140px;
top: 140px;
left: 200px;
z-index: -3;
border: 5px solid #3f3f3f;
background: #54c8ef;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
overflow: none;
}
.blue-body-line1 {
position: fixed;
width: 120px;
height: 5px;
top: 255px;
left: 200px;
z-index: -1;
background: #3f3f3f;
}
.blue-body-line2 {
position: fixed;
width: 120px;
height: 5px;
top: 225px;
left: 200px;
z-index: -1;
background: #3f3f3f;
}
.blue-body-line3 {
position: fixed;
width: 120px;
height: 5px;
top: 195px;
left: 200px;
z-index: -1;
background: #3f3f3f;
}
.blue-lower-dot1 {
position: fixed;
width: 5px;
height: 5px;
top: 263px;
left: 223px;
z-index: -1;
background: #2497b4;
border-radius: 100%;
border: 5px solid #3f3f3f;
animation-name: blue-lower-dot1;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-lower-dot2 {
position: fixed;
width: 5px;
height: 5px;
top: 263px;
left: 253px;
z-index: -1;
background: #e33568;
border-radius: 100%;
border: 5px solid #3f3f3f;
animation-name: blue-lower-dot2;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-lower-dot3 {
position: fixed;
width: 5px;
height: 5px;
top: 263px;
left: 283px;
z-index: -1;
background: #2497b4;
border-radius: 100%;
border: 5px solid #3f3f3f;
animation-name: blue-lower-dot3;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-lower-triangle {
position: fixed;
width: 0;
height: 0;
top: 260px;
left: 205px;
z-index: 4;
border-top: 10px solid #2497b4;
border-right: 10px solid transparent;
}
.blue-mid-dot1 {
position: fixed;
width: 5px;
height: 5px;
top: 235px;
left: 223px;
z-index: -1;
background: #e33568;
border-radius: 100%;
border: 5px solid #3f3f3f;
animation-name: blue-mid-dot1;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-play-state: running;
}
.blue-mid-dot2 {
position: fixed;
width: 5px;
height: 5px;
top: 235px;
left: 253px;
z-index: -1;
background: #2497b4;
border-radius: 100%;
border: 5px solid #3f3f3f;
animation-name: blue-mid-dot2;
animation-duration: 1s;
纯CSS3 实现的机器人舞会跳舞动画场景效果源码.zip （1个子文件） 
132686843876292265 
index.html 35KB资源评论
易小侠
- 粉丝: 6629
- 资源: 9万+
最新资源
- 白色简洁风格的宠物美容服务整站网站源码下载.zip
- 白色简洁风格的创意画展模板下载.zip
- 白色简洁风格的宠物收养所源码下载.zip
- 白色简洁风格的出租车公司整站网站源码下载.zip
- 白色简洁风格的创意室内设计模板下载.zip
- 白色简洁风格的创意生活家居整站网站源码下载.zip
- 白色简洁风格的创意设计网站模板下载.zip
- 白色简洁风格的创意图片设计模板下载.zip
- 白色简洁风格的大学图书教育整站网站模板.zip
- 白色简洁风格的大型机械卡车运输企业网站模板.zip
- 白色简洁风格的当代网站CSS3模板.zip
- 白色简洁风格的单页面背景信息源码下载.zip
- 白色简洁风格的地产实业公司企业网站源码下载.zip
- 白色简洁风格的登录页源码下载.zip
- 白色简洁风格的登山探险装备网店整站网站源码下载.zip
- 白色简洁风格的电话通讯公司模板下载.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
