Difference between revisions of "Template:SZU-China/Nav demo"

Line 219: Line 219:
 
</style>
 
</style>
  
 +
 +
<style>
 +
.header-nav {
 +
position: fixed;
 +
top: 16px;
 +
left: 0;
 +
width: 100%;
 +
padding-top: 0;
 +
padding-bottom: 5px;
 +
background-color: #020202;
 +
box-shadow: 0 0 6px 0 #333;
 +
opacity: 0.7;
 +
z-index: 1000;
 +
-webkit-transition: all 0.3s;
 +
transition: all 0.3s;
 +
text-align: center;
 +
height: 45px;
 +
}
 +
.header-nav:hover{
 +
opacity: 1;
 +
}
 +
.nav-item1{
 +
font-size: 20px;
 +
font-weight: 700;
 +
padding-right: 15px;
 +
padding-left: 15px;
 +
 +
}
 +
.nav-sub-item{
 +
font-size: 20px;
 +
padding: 5px 10px;
 +
top:0;
 +
text-align: center
 +
}
 +
.sub_menu{
 +
position: absolute;
 +
z-index: 1000;
 +
float: left;
 +
min-width: 160px;
 +
list-style: none;
 +
font-size: 12px;
 +
background-color: #464646;
 +
border: 1px solid #cccccc;
 +
color: #fff;
 +
border: 1px solid rgba(0, 0, 0, 0.15);
 +
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 +
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 +
-webkit-background-clip: padding-box;
 +
background-clip: padding-box;
 +
}
 +
.nav-sub-item:hover{
 +
background-color: rgb(171,171,171);
 +
 +
}
 +
.nav-sub-item a{
 +
text-decoration: none;
 +
color:white;
 +
}
 +
.nav-1-item{
 +
font-size: 16px;
 +
font-weight: 700;
 +
padding: 0px 11px;
 +
        display:block;
 +
        height: 42px;
 +
        float: right;
 +
        color: white !important;
 +
}
 +
    .animated {
 +
        -webkit-animation-duration: 1s;
 +
        animation-duration: 1s;
 +
        -webkit-animation-fill-mode: both;
 +
        animation-fill-mode: both;
 +
    }
 +
    .bounce {
 +
        -webkit-animation-name: bounce;
 +
        animation-name: bounce;
 +
        -webkit-transform-origin: center bottom;
 +
        transform-origin: center bottom;
 +
    }
 +
    @keyframes bounce {
 +
        0%, 20%, 53%, 80%, 100% {
 +
            -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 +
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 +
            -webkit-transform: translate3d(0,0,0);
 +
            transform: translate3d(0,0,0);
 +
        }
 +
        40%, 43% {
 +
            -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
            -webkit-transform: translate3d(0, -30px, 0);
 +
            transform: translate3d(0, -30px, 0);
 +
        }
 +
        70% {
 +
            -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
            -webkit-transform: translate3d(0, -15px, 0);
 +
            transform: translate3d(0, -15px, 0);
 +
        }
 +
        90% {
 +
            -webkit-transform: translate3d(0,-4px,0);
 +
            transform: translate3d(0,-4px,0);
 +
        }
 +
    }
 +
</style>
  
 
<body>
 
<body>

Revision as of 19:18, 17 October 2018