logo圆顶效果 html,纯CSS做的Logo效果

FB - CSS3

* {

margin:0px;

padding:0px;}

::-moz-selection {

background:#f50;

color: #fff;}

::selection {

background:#f50;

color: #fff;}

html {

height:100%;

background:#aaa;

background:-webkit-gradient(linear,0 0,0 bottom,from(#fff),to(#aaa));

-webkit-transition:25s;

-o-transition:25s;

-moz-transition:25s;}

body {

margin:50px auto;

cursor:default;

color:#333;

font-size:12px;}

html:hover {

background:#9ac5ff;

background:-webkit-gradient(linear,0 0,0 bottom,from(#daeaff),to(#9ac5ff));

-webkit-transition:5s;

-o-transition:5s;

-moz-transition:5s;}

div {

margin:auto;

_overflow:hidden;}

.div1 {

width:300px;

height:300px;

border-radius:150px;

background:#0064b5;

-webkit-box-shadow:0 0 10px #0064b5;

-o-box-shadow:0 0 10px #0064b5;

-moz-box-shadow:0 0 10px #0064b5;

box-shadow:0 0 10px #0064b5;

border:5px #e3f1ff solid;

background:-webkit-gradient(linear,0 0,0 bottom,from(#4fb8ff),to(#0064b5));}

.div2 {

width:250px;

height:250px;

border-radius:125px;

position:relative;

top:25px;

background:#6ec4ff;

background:-webkit-gradient(linear,0 0,0 bottom,from(#e3f1ff),to(#6ec4ff));}

.div3 {

width:200px;

height:232px;

border-radius:100px 100px 50px 50px;

position:relative;

top:25px;

background:#0569ba;

background:-webkit-gradient(linear,0 0,0 bottom,from(#4fb8ff),to(#0569ba));}

.div4 {

width:75px;

height:75px;

background:red;

position:relative;

top:60px;

left:-60px;

border-radius:150px 0 0 0;

-webkit-transform:rotate(315deg);

-o-transform:rotate(315deg);

-moz-transform:rotate(315deg);

-webkit-transition:0.5s;

-o-transition:0.5s;

-moz-transition:0.5s;

background:#ff3027;

background:-webkit-gradient(linear,0 0,0 bottom,from(#ffccca),to(#ff3027));}

.div3:hover .div4 {

top:-5px;

left:0;

-webkit-transform:rotate(405deg) scale(1.2,1.2);

-o-transform:rotate(405deg) scale(1.2,1.2);

-moz-transform:rotate(405deg) scale(1.2,1.2);}

.div5 {

width:75px;

height:75px;

background:red;

position:relative;

top:-14px;

left:60px;

border-radius:150px 0 0 0;

-webkit-transform:rotate(135deg);

-o-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-webkit-transition:0.5s;

-o-transition:0.5s;

-moz-transition:0.5s;

background:#78ab03;

background:-webkit-gradient(linear,0 0,0 bottom,from(#d5f889),to(#78ab03));}

.div3:hover .div5 {

top:50px;

left:0;

-webkit-transform:rotate(225deg) scale(1.2,1.2);

-o-transform:rotate(225deg) scale(1.2,1.2);

-moz-transform:rotate(225deg) scale(1.2,1.2);}

.div6 {

width:75px;

height:75px;

background:red;

position:relative;

top:-150px;

left:0px;

border-radius:150px 0 0 0;

-webkit-transform:rotate(45deg);

-o-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-webkit-transition:0.5s;

-o-transition:0.5s;

-moz-transition:0.5s;

background:#ffb500;

background:-webkit-gradient(linear,0 0,0 bottom,from(#fffc00),to(#ffb500));}

.div3:hover .div6 {

top:-90px;

left:-65px;

-webkit-transform:rotate(-45deg) scale(1.2,1.2);

-o-transform:rotate(-45deg) scale(1.2,1.2);

-moz-transform:rotate(-45deg) scale(1.2,1.2);}

.div7 {

width:75px;

height:75px;

background:red;

position:relative;

top:-105px;

left:0px;

border-radius:150px 0 0 0;

-webkit-transform:rotate(225deg);

-o-transform:rotate(225deg);

-moz-transform:rotate(225deg);

-webkit-transition:0.5s;

-o-transition:0.5s;

-moz-transition:0.5s;

background:#d6d7d7;

background:-webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(#d6d7d7));}

.div3:hover .div7 {

top:-165px;

left:65px;

-webkit-transform:rotate(135deg) scale(1.2,1.2);

-o-transform:rotate(135deg) scale(1.2,1.2);

-moz-transform:rotate(135deg) scale(1.2,1.2);}

.title {

clear:both;

margin:50px auto;

padding:25px 0;

clear:both;

width:300px;

font-family:"Impact";

font-weight:normal;

border-radius:10px;

font-size:28px;

color:#0064b5;

border:2px #0064b5 solid;

text-shadow:0 2px 0 #fff;

-webkit-transition:0.5s;

-o-transition:0.5s;

-moz-transition:0.5s;

background:#d6d7d7;

background:-webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(#d6d7d7));}

.title:hover {

-webkit-transform:rotate(360deg);

-o-transform:rotate(360deg);

-moz-transform:rotate(360deg);

color:#fff;

text-shadow:0 2px 0 #0064b5;

background:#0064b5;

background:-webkit-gradient(linear,0 0,0 bottom,from(#4fb8ff),to(#0064b5));}

.title::-moz-selection {

background:#0064b5;

color:#fff;}

.title::selection {

background:#0064b5;

color:#fff;}

FengBao.com