分享css3写的google 标志

lanselixiang 2012-12-12 11:07:50

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>google-zhounianlai@126.com</title>
<style type="text/css">
div{margin:0px;padding:0px;display:block}
.bg{height:300px;width:500px;margin:20px auto;position:relative;border:solid 20px #ccc;background:#fff;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
}

.content{position:absolute;left:140px;top:35px;}

.b1{background:#f0d200;z-index:4;}
.b2{background:#db4840;z-index:3;
-moz-transform:rotate(-120deg);
-webkit-transform:rotate(-120deg);
-o-transform:rotate(-120deg);
transform:rotate(-120deg);
}
.b3{background:#54ae32;
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}

.b1, .b2, .b3,.b4{height:220px;width:220px;position:absolute;clip:rect(65px, 220px, 222px, 99px);
-moz-border-radius:50%;
-webkit-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;

-moz-box-shadow:-41px -3px 24px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow:-41px -3px 24px rgba(255, 255, 255, 0.3) inset;
-o-box-shadow:-41px -3px 24px rgba(255, 255, 255, 0.3) inset;
box-shadow:-41px -3px 24px rgba(255, 255, 255, 0.3) inset;
}
.b4{background:#54ae32;z-index:4;clip:rect(65px, 220px, 100px, 99px);
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
.circle{height:94px;width:94px;background:#fff;left:63px;top:63px;z-index:5;}

.circle:before{height:82px;width:82px;background:#466fd9;left:6px;top:6px;content:"";
-moz-box-shadow:0 3px 2px #ccc;
-webkit-box-shadow:0 3px 2px #ccc;
-o-box-shadow:0 3px 2px #ccc;
box-shadow:0 3px 2px #ccc;
}

.circle:after{height:82px;width:82px;left:6px;top:6px;content:"";
background:-moz-radial-gradient(circle at 40px 23px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%) ;
background:-webkit-radial-gradient(circle at 40px 23px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%) ;
background:-o-radial-gradient(circle at 40px 23px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%) ;
background:radial-gradient(circle at 40px 23px, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%) ;
}

.circle,.circle:before,.circle:after{position:absolute;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}

</style>
</head>
<body>

<div class="bg">

<div class="content">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>

<div class="circle"></div>
</div>

</div>

</body>
</html>

...全文