<!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>纯CSS画的鹦鹉图案动画</title>
<style>
body {
background-color: #f58e54;
}
.parrot {
width: 125px;
height: 185px;
margin: auto;
position: relative;
left: 0;
top: 110px;
animation: waggon 1s linear infinite alternate;
}
.parrotBody {
width: 100%;
height: 100%;
border-radius: 150px 150px 0 220px;
background: #6bcc59;
}
.parrotHead {
width: 100%;
height: 125px;
border-radius: 50%;
position: relative;
animation: head 20s linear infinite;
animation-delay: 1s;
background: #e4fa40;
}
.parrotHead>.eye {
width: 12px;
height: 12px;
background: #1f404f;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-100%);
animation: 5s wink linear infinite;
}
.parrotHead>.eye:after {
content: '';
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
display: block;
}
.parrotHead>.eyeLeft {
left: 0;
}
.parrotHead>.eyeRight {
right: 50px;
}
.parrotNose {
width: 35px;
height: 35px;
position: absolute;
top: 70px;
left: 20px;
border-radius: 0 0 0 100%;
animation: nose 10s linear infinite;
background: #f69358;
}
.parrotNose>.nostril {
width: 50%;
height: 19px;
position: absolute;
top: -10px;
background: #6ab1ff;
}
.parrotNose>.nostril:after {
content: "";
width: 5px;
height: 5px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
background: #1f414d;
}
.parrotNose>.nostrilLeft {
border-radius: 50% 0 50% 50%;
left: 0;
}
.parrotNose>.nostrilRight {
border-radius: 0 50% 50% 50%;
right: 0;
}
.parrotTail {
width: 30px;
height: 170px;
position: absolute;
right: 0;
bottom: -170px;
border-radius: 0 0 0 100%/0 0 0 25%;
background: #68c956;
}
.parrotTail:after {
width: 15px;
height: 0;
content: "";
position: absolute;
top: 30px;
left: 0;
border-top: 15px solid #17784f;
border-left: 15px solid transparent;
border-right: 0 solid transparent;
}
.parrotLump {
width: 90px;
height: 110px;
position: absolute;
right: 0;
bottom: 0;
overflow: hidden;
}
.parrotLumpContainer {
display: table;
width: 100%;
margin-bottom: 5px;
position: relative;
right: -15px;
}
.parrotLumpContainer:nth-child(4),
.parrotLumpContainer:nth-child(6) {
right: -5px;
}
.parrotLump-item {
float: right;
width: 20px;
height: 10px;
background: #17784f;
margin-right: 2px;
border-radius: 0 0 100% 100%/0 0 200% 200%;
}
.rocker {
width: 265px;
height: 364px;
position: absolute;
left: 50%;
top: -150px;
margin-left: -132.5px;
}
.rockerRope {
width: 5px;
background: #f9c0ad;
height: 100%;
position: absolute;
}
.rockerRope--left {
left: 30px;
}
.rockerRope--right {
right: 30px;
}
.rockerPillow {
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
background: #deca51;
border-radius: 30px/30px;
}
.rockerPillow:after {
content: "";
width: 30px;
height: 30px;
background: #fff9bf;
box-sizing: border-box;
border-radius: 50%;
border: 4px solid #d8e282;
position: absolute;
right: 0;
}
@-moz-keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@-webkit-keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@-o-keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@keyframes waggon {
100% {
transform: rotateX(-10deg);
}
}
@-moz-keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@-webkit-keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@-o-keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@keyframes wink {
0% {
height: 12px;
}
2% {
height: 0;
}
3% {
height: 12px;
}
100% {
height: 12px;
}
}
@-moz-keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@-webkit-keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@-o-keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@keyframes nose {
0% {
height: 35px;
}
2% {
height: 30px;
}
3% {
height: 35px;
}
4% {
height: 30px;
}
5% {
height: 35px;
}
100% {
height: 35px;
}
}
@-moz-keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
@-webkit-keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
@-o-keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
@keyframes head {
0% {
transform: rotate(0);
}
1% {
transform: rotate(15deg);
}
20% {
transform: rotate(15deg);
}
21% {
transform: rotate(0);
}
65% {
transform: rotate(0);
}
66% {
transform: rotate(-10deg);
}
80% {
transform: rotate(-10deg);
}
81% {
transform: rotate(0);
}
100% {
transform: rotate(0);
}
}
</style>
</head>
<body>
<div class="parrot">
<div class="parrotBody">
<div class="parrotHead">
<div class="eye eyeLeft"></div>
<
