<!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>jQuery+CSS3构建的竹林和国宝熊猫图</title>
<style>
body {
background-color: #61755A;
margin: 0;
overflow: hidden;
}
/* typo style */
.typo-wrapper {
bottom: 0;
height: 255px;
left: 0;
margin: auto;
position: fixed;
right: 0;
width: 100%;
}
.typo-wrapper:after {
background-color: #4b593a;
bottom: 0;
content: '';
height: 50px;
position: absolute;
width: 100%;
}
.typo {
bottom: 0;
margin: auto;
position: relative;
width: 150px;
}
.ear {
background-color: #222;
border-radius: 100%;
height: 55px;
position: absolute;
top: -15px;
width: 60px;
}
.ear.left {
left: -12px;
}
.ear.right {
right: -12px;
}
.head {
background-color: #f9f9f9;
box-shadow: inset -3px -2px 10px #aaa;
border-radius: 100%;
height: 125px;
position: absolute;
width: 150px;
z-index: 3;
}
.head-wrapper {
left: 0px;
position: relative;
z-index: 3;
animation: dancing 1s linear infinite;
-webkit-animation: dancing 1s linear infinite;
-moz-animation: dancing 1s linear infinite;
-ms-animation: dancing 1s linear infinite;
-o-animation: dancing 1s linear infinite;
}
.eye {
background-color: #222;
border-radius: 100%;
height: 47px;
position: absolute;
top: 22px;
width: 37px;
}
.eye:after {
background-color: #f9f9f9;
border-radius: 100%;
content: '';
height: 11px;
position: absolute;
top: 12px;
width: 10px;
}
.eye.left {
left: 28px;
}
.eye.left:after {
right: 10px;
}
.eye.left:before {
background-color: #222;
border-radius: 100%;
content: '';
height: 15px;
left: -5px;
opacity: 0.9;
position: absolute;
top: 45px;
width: 10px;
}
.eye.right {
right: 28px;
}
.eye.right:after {
left: 10px;
}
.nose {
background-color: #222;
border-radius: 50% 50% 100% 100%;
height: 10px;
left: 66px;
position: absolute;
top: 75px;
width: 18px;
}
.mouth {
background-color: #222;
border-radius: 100%;
bottom: 36px;
height: 5px;
left: 0px;
margin: auto;
position: absolute;
right: 0;
width: 1px;
z-index: 2;
}
.mouth:after,
.mouth:before {
border-bottom: 2px solid #222;
border-radius: 100%;
content: '';
height: 35px;
left: -28px;
margin: auto;
position: absolute;
right: 0;
top: -21px;
width: 30px;
z-index: 2;
}
.mouth:before {
left: -1px;
}
.arm {
background-color: #222;
border-radius: 30% 30% 45% 45%;
height: 120px;
position: absolute;
top: 95px;
width: 55px;
z-index: 1;
}
.arm.left {
left: -5px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
.arm.right {
right: -5px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
}
.body {
background-color: #f9f9f9;
border-radius: 100%;
box-shadow: inset -5px -5px 10px #aaa;
height: 125px;
left: 20px;
position: absolute;
top: 90px;
width: 110px;
z-index: 2;
}
.leg {
background-color: #222;
height: 50px;
position: absolute;
top: 185px;
width: 120px;
z-index: 1;
}
.leg.left {
border-radius: 100% 0% 0% 10%;
left: -35px;
}
.leg.left:before {
left: -4px;
}
.leg.right {
border-radius: 0% 100% 10% 0%;
right: -35px;
}
.leg.right:before {
right: -4px;
}
.leg:before {
background-color: #222;
border-radius: 100%;
bottom: 0;
content: '';
height: 40px;
position: absolute;
width: 20px;
}
/* end of typo style */
/* bamboo background style */
.bamboo-wrapper {
height: 100%;
width: 100%;
}
.bamboo-tree {
background-color: #556344;
box-shadow: inset 1px 1px 7px #414f30;
height: 100%;
position: absolute;
width: 12px;
}
.tree-detail {
border-bottom: 3px solid #3E4735;
border-radius: 100%;
height: 9px;
position: absolute;
width: 12px;
}
.tree-1 {
left: 41%;
transform: skewX(9deg);
}
.tree-1 .tree-detail.one {
top: 7%;
}
.tree-1 .tree-detail.two {
top: 46%;
}
.tree-1 .tree-detail.three {
top: 62%;
}
.tree-2 {
left: 56%;
transform: skewX(-4deg);
}
.tree-2 .tree-detail.one {
top: 10%;
}
.tree-2 .tree-detail.two {
top: 52%;
}
.tree-2 .tree-detail.three {
top: 85%;
}
.tree-3 {
left: 77%;
transform: skewX(4deg);
}
.tree-3 .tree-detail.one {
top: 10%;
}
.tree-3 .tree-detail.two {
top: 56%;
}
.tree-3 .tree-detail.three {
top: 76%;
}
.tree-4 {
left: 15%;
transform: skewX(1deg);
}
.tree-4 .tree-detail.one {
top: 28%;
}
.tree-4 .tree-detail.two {
top: 60%;
}
.tree-4 .tree-detail.three {
top: 68%;
}
.tree-5 {
left: 87%;
transform: skewX(-8deg);
}
.tree-5 .tree-detail.one {
top: 26%;
}
.tree-5 .tree-detail.two {
top: 56%;
}
.tree-5 .tree-detail.three {
top: 69%;
}
.tree-6 {
left: 47%;
transform: skewX(-5deg);
}
.tree-6 .tree-detail.one {
top: 20%;
}
.tree-6 .tree-detail.two {
top: 36%;
}
.tree-6 .tree-detail.three {
top: 75%;
}
.tree-7 {
left: 78%;
transform: skewX(-7deg);
}
.tree-7 .tree-detail.one {
top: 8%;
}
.tree-7 .tree-detail.two {
top: 51%;
}
.tree-7 .tree-detail.three {
top: 74%;
}
.tree-8 {
left: 89%;
transform: skewX(5deg);
}
.tree-8 .tree-detail.one {
top: 22%;
}
.tree-8 .tree-detail.two {
top: 40%;
}
.tree-8 .tree-detail.three {
top: 75%;
}
.tree-9 {
left: 74%;
transform: skewX(-9deg);
}
.tree-9 .tree-detail.one {
top: 23%;
}
.tree-9 .tree-detail.two {
top: 33%;
}
.tree-9 .tree-detail.three {
top: 82%;
}
.tree-10 {
left: 89%;
transform: skewX(-2deg);
}
.tree-10 .tree-detail.one {
top: 13%;
}
.tree-10 .tree-detail.two {
top: 42%;
}
.tree-10 .tree-detail.three {
top: 62%;
}
.tree-11 {
left: 13%;
transform: skewX(-4deg);
}
.tree-11 .tree-detail.one {
top: 22%;
}
.tree-11 .tree-detail.two {
top: 48%;
}
.tree-11 .tree-detail.three {
top: 85%;
}
.tree-12 {
left: 39%;
transform: skewX(9deg);
}
.tree-12 .tree-detail.one {
top: 20%;
}
.tree-12 .tree-detail.two {
top: 40%;
}
.tree-12 .tree-detail.three {
top: 79%;
}
.tree-13 {
left: 63%;
transform: skewX(-3deg);
}
.tree-13 .tree-detail.one {
top: 21%;
}
.tree-13 .tree-detail.two {
top: 42%;
}
.tree-13 .tree-detail.three {
top: 82%;
}
.tree-14 {
left: 80%;
transform: skewX(7deg);
}
.tree-14 .tree-detail.one {
top: 20%;
}
.tree-14 .tree-detail.two {
top: 47%;
}
.tree-14 .tree-detail.three {
top: 63%;
}
.tree-15 {
left: 44%;
transform: skewX(4deg);
}
.tree-15 .tree-detail.one {
top: 29%;
}
.tree-15 .tree-detail.two {
top: 44%;
}
.tree-15 .tree-detail.three {
top: 69%;
}
.tree-16 {
left: 66%;
transform: skewX(-3deg);
}
.tree-16 .tree-detail.one {
top: 5%;
}
.tree-16 .tree-detail.two {
top: 43%;
}
.tree-16 .tree-detail.three {
top: 84%;
}
.tree-17 {
left: 13%;
transform: skewX(-5deg);
}
.tree-17 .tree-detail.one {
top: 17%;
}
.tree-17 .tree-detail.two {
top: 57%;
}
.tree-17 .tree-detail.thre
