first commit
This commit is contained in:
211
WebRoot/CSS/circularRing.css
Normal file
211
WebRoot/CSS/circularRing.css
Normal file
@ -0,0 +1,211 @@
|
||||
#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;
|
||||
}
|
||||
Reference in New Issue
Block a user