<!DOCTYPE Html>
<Html>
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/CSS">
.zm-container {
width:480px;height:278px;
position:relative;
}
.z-container {
width:260px;height:190px;overflow:hidden;
position:absolute;left:0;top:0;
}
.z-1 {
background:#6cb;
width:87px;height:17px;padding:0 0 18px 25px;
border-radius:0 0 0 12px;
position:absolute;left:0;top:0;
}
.z-1:after {
content:"";
display:block;background:#fff;
height:17px;
border-radius:0 0 0 6px;
}
.z-2 {
background:#6cb;
width:25px;height:72px;
position:absolute;left:46px;top:35px;
}
.z-2:after {
content:"";
display:block;background:#6cb;
width:106px;height:18px;
position:absolute;bottom:0;left:-45px;
}
.z-3 {
background:#6cb;
width:90px;height:84px;border-radius:0 0 90px 0;
position:absolute;left:-20px;top:107px;
}
.z-3:before {
content:"";
display:block;background:#fff;
width:90px;height:76px;border-radius:0 0 90px 0;
position:absolute;left:-25px;top:0;
}
.z-4 {
width:130px;height:130px;border:20px solid #6cb;
border-radius:130px;
position:absolute;left:88px;top:17px;
cursor:pointer;
}
.z-4:after {
content:"";
width:80px;height:80px;
background:#fff;
position:absolute;left:-20px;bottom:-20px;
}
.z-4 span.dot1,.z-4 span.dot2,.z-4 span.dot3 {
width:18px;height:18px;
display:block;background:#f86;
border-radius:18px;
position:absolute;left:23px;top:52px;
z-index:1;
}
.z-4 span.dot2 {
left:57px;
z-index:3;
}
.z-4 span.dot3 {
left:91px;
z-index:3;
}
.z-4 span.dot1 {
animation:changebg1 3s 1000;
-moz-animation:changebg1 3s 1000;
-webkit-animation:changebg1 3s 1000;
}
.z-4 span.dot2 {
animation:changebg2 3s 1000;
-moz-animation:changebg2 3s 1000;
-webkit-animation:changebg2 3s 1000;
}
.z-4 span.dot3 {
animation:changebg3 3s 1000;
-moz-animation:changebg3 3s 1000;
-webkit-animation:changebg3 3s 1000;
}
.z-4:hover span.dot1 {
animation:dotAnimate1 1s 1;
-moz-animation:dotAnimate1 1s 1;
-webkit-animation:dotAnimate1 1s 1;
}
.z-4:hover span.dot2 {
animation:dotAnimate2 1s 1;
-moz-animation:dotAnimate2 1s 1;
-webkit-animation:dotAnimate2 1s 1;
}
.z-4:hover span.dot3 {
animation:dotAnimate3 1s 1;
-moz-animation:dotAnimate3 1s 1;
-webkit-animation:dotAnimate3 1s 1;
}
@-moz-keyframes changebg1 {
0% {background:#6cb;}
25% {background:#6cb;}
50% {background:#f86;}
75% {background:#f86;}
100% {background:#f86;}
}
@-moz-keyframes changebg2 {
0% {background:#f86;}
25% {background:#f86;}
50% {background:#6cb;}
75% {background:#f86;}
100% {background:#6cb;}
}
@-moz-keyframes changebg3 {
0% {background:#f86;}
25% {background:#f86;}
50% {background:#f86;}
75% {background:#6cb;}
100% {background:#f86;}
}
@-moz-keyframes dotAnimate1 {
0% {top:52px;}
25% {top:56px;}
30% {top:56px;}
60% {top:42px;}
}
@-moz-keyframes dotAnimate2 {
0% {top:52px;}
25% {top:48px;}
30% {top:48px;}
60% {top:62px;}
}
@-moz-keyframes dotAnimate3 {
0% {top:52px;}
25% {top:56px;}
30% {top:56px;}
60% {top:42px;}
}
.z-5 {
width:128px;height:80px;
overflow:hidden;
position:absolute;left:40px;bottom:3px;
}
.z-5 span {
width:220px;height:220px;border:20px solid #6cb;
border-radius:220px;
display:block;
position:absolute;left:0;bottom:0;
}
.m-container {
width:206px;height:190px;
position:absolute;top:0;left:275px;
}
.m-1 {
width:35px;height:17px;overflow:hidden;
position:absolute;left:34px;top:0;
}
.m-1:before,.m-2:before {
content:"";
width:49px;height:85px;
background:#6cb;display:block;
border-radius:50%;
position:absolute;left:0;top:-43px;
}
.m-1:after,.m-2:after {
content:"";
width:21px;height:27px;
background:#fff;display:block;
border-radius:50%;
position:absolute;left:28px;top:-10px;
}
.m-2 {
width:35px;height:17px;overflow:hidden;
position:absolute;right:34px;top:0;
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}
.m-3 {
font-height:0;line-height:0;
height:2px;width:70px;
background:#6cb;
position:absolute;left:68px;top:15px;
}
.m-4,.m-4:before,.m-4:after {
width:206px;height:18px;
background:#6cb;display:block;
position:absolute;top:17px;left:0;
}
.m-4:before {
content:"";
top:34px;
}
.m-4:after {
content:"";
top:68px;
}
.m-5 {
width:206px;height:18px;
background:#6cb;
position:absolute;left:0;top:119px;
}
.m-5:after {
content:"";
display:block;
background:#6cb;
width:26px;height:90px;
position:absolute;left:90px;top:-86px;
}
.m-6 {
width:120px;height:53px;overflow:hidden;
position:absolute;left:0;bottom:0;
}
.m-6 span,.m-7 span {
background:#6cb;display:block;
width:220px;height:180px;border-radius:50%;
position:absolute;left:-98px;bottom:0;
}
.m-6 span:before,.m-7 span:before {
content:"";
display:block;background:#fff;
width:190px;height:138px;border-radius:50%;
position:absolute;left:2px;bottom:12px;
}
.m-7 {
width:120px;height:53px;overflow:hidden;
position:absolute;right:0;bottom:0;
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}
</style>
</head>
<body>
<div class="logo" onclick="Javascript:location.href='http://www.zhimei.com'">
<div class="zm-container">
<div class="z-container">
<div class="z-1"></div>
<div class="z-2"></div>
<div class="z-3"></div>
<div class="z-4"><span class="dot1"></span><span class="dot2"></span><span class="dot3"></span></div>
<div class="z-5"><span></span></div>
</div>
<div class="m-container">
<div class="m-1"></div>
<div class="m-2"></div>
<div class="m-3"></div>
<div class="m-4"></div>
<div class="m-5"></div>
<div class="m-6"><span></span></div>
<div class="m-7"><span></span></div>
</div>
</div>
</div>
</body>
</Html>