<!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>
body {
padding: 20px;
}
.body {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 30px;
height: 30px;
background: #eb0101;
border: 2px solid #000;
border-radius: 30px 10px 20px 20px/15px 30px 5px 10px;
}
.body::before {
content: ' ';
position: absolute;
left: 4px;
top: 10px;
z-index: 5;
width: 14px;
height: 18px;
background: #eb0101;
}
.header-outside::before {
content: ' ';
position: absolute;
left: 106px;
top: 93px;
z-index: 5;
width: 12px;
height: 12px;
background: #eb0101;
border-radius: 0 0 12px 0/0 0 12px 0;
-webkit-transform: rotateZ(-36deg);
}
.hand {
position: absolute;
bottom: -5px;
left: 8px;
z-index: 2;
-webkit-transform: rotateZ(14deg) skew(-16deg);
width: 26px;
height: 12px;
background: #eb0101;
border: 2px solid #000;
border-left: 0 none;
border-radius: 0px 26px 20px 3px/0px 8px 8px 5px;
}
.foot {
position: absolute;
left: 30px;
bottom: -2px;
z-index: 1;
width: 24px;
height: 10px;
background: #eb0101;
border: 2px solid #000;
border-radius: 12px 12px 18px 4px/8px 6px 6px 2px;
}
.ass {
position: absolute;
top: 0;
left: 24px;
z-index: -1;
width: 16px;
height: 28px;
background: #fff;
border: 2px solid #000;
border-radius: 2px 16px 12px 0/2px 18px 10px 0;
}
.header {
position: absolute;
left: 6px;
top: 20px;
z-index: 2;
width: 104px;
height: 94px;
background: #eb0101;
border: 2px solid #000;
border-radius: 66px 34px 45px 55px/70px 60px 20px 30px;
overflow: hidden;
}
.face {
position: absolute;
left: -5px;
bottom: 0;
width: 34px;
height: 70px;
background: #fdb;
border-radius: 30px 0 6px 10px/16px 50px 20px 5px;
}
.face::before {
content: ' ';
position: absolute;
right: -12px;
bottom: 10px;
width: 20px;
height: 68px;
background: #fdb;
border-radius: 8px 12px 8px 10px/10px 50px 20px 5px;
-webkit-transform: rotateZ(5deg);
}
.face::after {
content: ' ';
position: absolute;
right: -12px;
bottom: 14px;
width: 18px;
height: 10px;
border-radius: 9px 5px;
background: rgba(255, 100, 100, 0.5);
-webkit-transform: rotateZ(20deg);
-webkit-filter: blur(3px);
}
.eyes {
position: absolute;
left: 8px;
top: 39px;
width: 32px;
height: 2px;
border-bottom: 4px solid #000;
border-radius: 2px 2px 15px 15px;
-webkit-transform: rotateZ(10deg);
}
.eyes::before {
content: ' ';
position: absolute;
left: 15px;
top: -30px;
width: 10px;
height: 4px;
background: #000;
border-radius: 4px/3px 3px 1px 1px;
}
.eyes::after {
content: ' ';
position: absolute;
left: 17px;
top: -27px;
width: 6px;
height: 4px;
background: #fdb;
border-radius: 3px/3px 3px 1px 1px;
}
.nose {
position: absolute;
left: 0;
top: 84px;
z-index: 5;
width: 3px;
height: 3px;
background: #fdb;
border: 4px solid #000;
border-bottom-width: 3px;
border-right-width: 3px;
border-radius: 5px;
}
.ears {
position: absolute;
left: 62px;
top: 6px;
z-index: 5;
width: 46px;
height: 46px;
background: #eb0101;
border: 2px solid #000;
border-bottom: 0 none;
border-radius: 10px 36px 36px 10px/23px 34px 6px 23px;
-webkit-transform: rotateZ(50deg);
}
.ears::before {
content: ' ';
position: absolute;
bottom: -6px;
right: -6px;
width: 48px;
height: 24px;
background: #eb0101;
-webkit-transform: rotateZ(-30deg);
}
.ears::after {
content: ' ';
position: absolute;
top: 11px;
left: 4px;
width: 5px;
height: 22px;
background: #fdb;
border-radius: 2px 3px 1px 4px/16px 16px 6px 6px;
-webkit-transform: rotateZ(-8deg);
}
.ears.behide {
left: 54px;
top: 7px;
z-index: -1;
-webkit-transform: rotateZ(55deg);
}
.ears.behide::before,
.ears.behide::after {
display: none;
}
.shadow {
position: absolute;
bottom: 16px;
left: 20px;
z-index: 0;
}
.shadow::before,
.shadow::after {
content: ' ';
position: absolute;
background: #ccc;
}
.shadow::before {
left: 8px;
top: 0px;
width: 90px;
height: 20px;
border-radius: 45px/10px;
}
.shadow::after {
left: 80px;
top: 0px;
width: 50px;
height: 14px;
border-radius: 15px/7px;
}
.body-outside {
position: absolute;
top: 80px;
left: 100px;
z-index: 1;
width: 62px;
height: 36px;
}
.header-outside {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 118px;
height: 120px;
}
.ali {
position: absolute;
top: 100px;
left: 100px;
height: 120px;
width: 200px;
-webkit-transform: translateX(300px);
-webkit-animation: ali 6s 0.4s infinite;
}
.header-outside {
-webkit-animation: head 0.6s infinite;
}
.ears {
-webkit-animation: ears 0.6s infinite;
}
.ears.behide {
-webkit-animation: ears-behide 0.6s infinite;
}
.body-outside {
-webkit-animation: body 0.6s infinite;
}
.foot {
-webkit-animation: foot 0.6s infinite;
}
.shadow {
-webkit-animation: shadow 0.6s infinite;
}
@-webkit-keyframes head {
0% {
-webkit-transform: rotateZ(2deg);
}
70% {
-webkit-transform: rotateZ(-2deg);
}
100% {
-webkit-transform: rotateZ(2deg);
}
}
@-webkit-keyframes body {
0% {
-webkit-transform: translateX(1px) rotateZ(-8deg) scaleY(1);
}
70% {
-webkit-transform: translateX(-3px) translateY(-1px) rotateZ(0deg) scaleY(1.1);
}
100% {
-webkit-transform: translateX(1px) rotateZ(-8deg) scaleY(1);
}
}
@-webkit-keyframes foot {
0% {
-webkit-transform: translateX(0) rotateZ(2deg);
}
70% {
-webkit-transform: translateX(-4px) rotateZ(20deg);
}
100% {
-webkit-transform: translateX(0) rotateZ(2deg);
}
}
@-webkit-keyframes ears {
0% {
-webkit-transform: translateX(3px) translateY(3px) rotateZ(60deg);
}
70% {
-webkit-transform: translateX(0) translateY(0px) rotateZ(50deg);
}
100% {
-webkit-transform: translateX(3px) translateY(3px) rotateZ(60deg);
}
}
@-webkit-keyframes ears-behide {
0% {
-webkit-transform: translateX(1px) translateY(2px) rotateZ(60deg);
}
70% {
-webkit-transform: translateX(0) translateY(0px) rotateZ(50deg);
}
100% {
-webkit-transform: translateX(1px) translateY(2px) rotateZ(60deg);
}
}
@-webkit-keyframes shadow {
0% {
-webkit-transform: translateX(-5px) translateY(-1px);
}
70% {
-webkit-transform: translateX(0) translateY(1px);
}
100% {
-webkit-transform: translateX(-5px) translateY(-1px);
}
}
@-webkit-keyframes ali {
0% {
-webkit-transform: translateX(300px);
}
10% {
-webkit-transform: translateX(270px);
}
20% {
-webkit-transform: translateX(240px);
}
30% {
-webkit-transform: translateX(210px);
}
40% {
-webkit-transform: translateX(180px);
}
50% {
-webkit-transform: translateX(150px);
}
60% {
-webkit-transform: tra