211 lines
4.0 KiB
CSS
211 lines
4.0 KiB
CSS
#tipZone{
|
|
position:relative;
|
|
right:0;
|
|
top: 16px;
|
|
margin: 0 auto;
|
|
margin-bottom:25px;
|
|
margin-top:25px;
|
|
}
|
|
#base1 {
|
|
z-index:5;
|
|
margin-top:10px;
|
|
position:absoulte;
|
|
}
|
|
#base1 .bing {
|
|
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform: rotate(29deg);
|
|
}
|
|
#base2{
|
|
z-index:5;
|
|
margin-top:10px;
|
|
-moz-transform:rotate(30deg);
|
|
-webkit-transform:rotate(30deg);
|
|
-o-transform:rotate(30deg);
|
|
transform:rotate(30deg);
|
|
}
|
|
#base2 .bing {
|
|
-moz-transform: rotate(29deg);
|
|
-webkit-transform: rotate(29deg);
|
|
-o-transform: rotate(29deg);
|
|
transform: rotate(29deg);
|
|
}
|
|
#base3{
|
|
z-index:5;
|
|
margin-top:10px;
|
|
-moz-transform:rotate(60deg);
|
|
-webkit-transform:rotate(60deg);
|
|
-o-transform:rotate(60deg);
|
|
transform:rotate(60deg);
|
|
}
|
|
#base3 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base4{
|
|
z-index:5;
|
|
margin-top:10px;
|
|
-moz-transform:rotate(90deg);
|
|
-webkit-transform:rotate(90deg);
|
|
-o-transform:rotate(90deg);
|
|
transform:rotate(90deg);
|
|
}
|
|
#base4 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base5{
|
|
z-index:5;
|
|
margin-top:10px;
|
|
-moz-transform:rotate(120deg);
|
|
-webkit-transform:rotate(120deg);
|
|
-o-transform:rotate(120deg);
|
|
transform:rotate(120deg);
|
|
}
|
|
#base5 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base6{
|
|
z-index:5;
|
|
margin-top:10px;
|
|
-moz-transform:rotate(150deg);
|
|
-webkit-transform:rotate(150deg);
|
|
-o-transform:rotate(150deg);
|
|
transform:rotate(150deg);
|
|
}
|
|
#base6 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base7{
|
|
margin-top:10px;
|
|
-moz-transform:rotate(180deg);
|
|
-webkit-transform:rotate(180deg);
|
|
-o-transform:rotate(180deg);
|
|
transform:rotate(180deg);
|
|
}
|
|
#base7 .bing {
|
|
-moz-transform: rotate(29deg);
|
|
-webkit-transform: rotate(29deg);
|
|
-o-transform: rotate(29deg);
|
|
transform: rotate(29deg);
|
|
}
|
|
#base8{
|
|
margin-top:10px;
|
|
-moz-transform:rotate(210deg);
|
|
-webkit-transform:rotate(210deg);
|
|
-o-transform:rotate(210deg);
|
|
transform:rotate(210deg);
|
|
}
|
|
#base8 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base9{
|
|
margin-top:10px;
|
|
-moz-transform:rotate(240deg);
|
|
-webkit-transform:rotate(240deg);
|
|
-o-transform:rotate(240deg);
|
|
transform:rotate(240deg);
|
|
}
|
|
#base9 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base10{
|
|
margin-top:10px;
|
|
-moz-transform:rotate(270deg);
|
|
-webkit-transform:rotate(270deg);
|
|
-o-transform:rotate(270deg);
|
|
transform:rotate(270deg);
|
|
}
|
|
#base10 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base11{
|
|
margin-top:10px;
|
|
-moz-transform:rotate(300deg);
|
|
-webkit-transform:rotate(300deg);
|
|
-o-transform:rotate(300deg);
|
|
transform:rotate(300deg);
|
|
}
|
|
#base11 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
#base12{
|
|
z-index:4;
|
|
margin-top:10px;
|
|
-moz-transform:rotate(330deg);
|
|
-webkit-transform:rotate(330deg);
|
|
-o-transform:rotate(330deg);
|
|
transform:rotate(330deg);
|
|
}
|
|
#base12 .bing{
|
|
-moz-transform:rotate(29deg);
|
|
-webkit-transform:rotate(29deg);
|
|
-o-transform:rotate(29deg);
|
|
transform:rotate(29deg);
|
|
}
|
|
.part{
|
|
position:absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
clip: rect(0em,400px,400px,200px);
|
|
}
|
|
|
|
.bing {
|
|
position:absolute;
|
|
background-color:#cae9ff;
|
|
width:400px;
|
|
height:400px;
|
|
clip:rect(0px,200px,400px,0px);
|
|
-moz-border-radius:200px;
|
|
-webkit-border-radius:200px;
|
|
border-radius:200px;
|
|
}
|
|
.bing span{
|
|
position: absolute;
|
|
transform: rotate(-18deg);
|
|
top: 20px;
|
|
left: 140px;
|
|
display: block;
|
|
font-size:20px;
|
|
color:#000000;
|
|
|
|
}
|
|
.inner{
|
|
position: absolute;
|
|
top: 6%;
|
|
width: 70%;
|
|
height: 70%;
|
|
background-color: #FFFFFF;
|
|
border-radius: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
color:#ffffff;
|
|
text-align: center;
|
|
z-index:15;
|
|
} |