Difference between revisions of "Team:OUC-China/css/affix"

Line 1: Line 1:
−
ul.nav-tabs{
+
#myNav{
−
width: 140px;
+
margin-top: 120px;
−
margin-top: 60px;
+
margin-left: -40px;
−
border-radius: 4px;
+
border:0;
−
border: 1px solid #ddd;
+
border-radius:0px;
−
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
+
width:250px;
−
        font-size:14px;
+
height:30px;
 +
font-family:Georgia;
 
}
 
}
−
ul.nav-tabs li{
+
#myNav li{
−
margin: 0;
+
margin-top:10px;
−
border-top: 1px solid #ddd;
+
border:0;
 +
list-style:none;
 
}
 
}
−
ul.nav-tabs li:first-child{
+
#myNav li:first-child{
−
border-top: none;
+
border:0;border-top: none;
 
}
 
}
−
ul.nav-tabs li a{
+
#myNav li a{
 +
border:0;
 
margin: 0;
 
margin: 0;
−
padding: 8px 16px;
+
padding: 8px 0px;
−
border-radius: 0;
+
font-size:20px;
 +
text-decoration:none;
 +
color:black;
 
}
 
}
−
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
+
#myNav li.active a, #myNav li a:hover{
−
color: #fff;
+
color:#3399ff;
−
background: #0088cc;
+
−
border: 1px solid #0088cc;
+
 
}
 
}
−
ul.nav-tabs li:first-child a{
+
#myNav{
−
border-radius: 4px 4px 0 0;
+
top: -30px; /* Set the top position of pinned element */
 
}
 
}
−
ul.nav-tabs li:last-child a{
+
#myScrollspy{display:none;}
−
border-radius: 0 0 4px 4px;
+
#BtnTop{position:fixed;top:85%;left:94%;z-index:2147483646;width:60px;height:60px;display:none;cursor:pointer;
 +
animation:myfirst 5s;
 +
-moz-animation:myfirst 5s;
 +
-webkit-animation:myfirst 5s;
 +
-o-animation:myfirst 5s;
 +
animation-iteration-count:infinite;
 +
-moz-animation-iteration-count:infinite;
 +
-webkit-animation-iteration-count:infinite;
 +
-o-animation-iteration-count:infinite;
 +
animation-timing-function: linear;
 +
-moz-animation-timing-function: linear;
 +
-webkit-animation-timing-function: linear;
 +
-o-animation-timing-function: linear;  
 
}
 
}
−
ul.nav-tabs.affix{
+
 
−
top: 60px; /* Set the top position of pinned element */
+
@keyframes myfirst
 +
{
 +
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg);}
 
}
 
}
  
−
#BtnTop{ display:inline-block; display:none; width:139px; height:40px;background:#0088cc; color:#fff; cursor:pointer;text-decoration:none;text-indent:16px; border-radius: 0 0 4px 4px;border: 1px solid #ddd;}
+
@-moz-keyframes myfirst
−
#BtnTop span{ display:block; width:140px; height:40px; line-height:20px; font-size:14px;}
+
{
−
+
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg);}
 +
}
  
 +
@-webkit-keyframes myfirst
 +
{
 +
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg);}
 +
}
 +
 +
@-o-keyframes myfirst
 +
{
 +
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg); }
 +
}
 +
 
p{text-align: justify;}
 
p{text-align: justify;}

Revision as of 03:37, 17 October 2016

#myNav{ margin-top: 120px; margin-left: -40px; border:0; border-radius:0px; width:250px; height:30px; font-family:Georgia; } #myNav li{ margin-top:10px; border:0; list-style:none; } #myNav li:first-child{ border:0;border-top: none; } #myNav li a{ border:0; margin: 0; padding: 8px 0px; font-size:20px; text-decoration:none; color:black; } #myNav li.active a, #myNav li a:hover{ color:#3399ff; } #myNav{ top: -30px; /* Set the top position of pinned element */ } #myScrollspy{display:none;} #BtnTop{position:fixed;top:85%;left:94%;z-index:2147483646;width:60px;height:60px;display:none;cursor:pointer; animation:myfirst 5s; -moz-animation:myfirst 5s; -webkit-animation:myfirst 5s; -o-animation:myfirst 5s; animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-timing-function: linear; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; }

@keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);} }

@-moz-keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);} }

@-webkit-keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);} }

@-o-keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); } }

p{text-align: justify;}