Difference between revisions of "Template:DLUT China B/css/nav.css"

(修正最后一个导航项溢出页面的问题。)
(增加多浏览器支持。)
Line 2: Line 2:
 
     0% {
 
     0% {
 
         opacity: 0;
 
         opacity: 0;
 +
        -moz-opacity: 0;
 
         transform: translate3d(0, -30px, 0);
 
         transform: translate3d(0, -30px, 0);
 +
        -moz-transform: translate3d(0,-30px,0);
 
     }
 
     }
 
     100% {
 
     100% {
 
         opacity: 1;
 
         opacity: 1;
 +
        -moz-opacity: 1;
 
         transform: none;
 
         transform: none;
 +
        -moz-transform: none;
 
     }
 
     }
 
}
 
}
Line 13: Line 17:
 
     height: 2em;
 
     height: 2em;
 
     width: max-content;
 
     width: max-content;
 +
    width:-moz-max-content;
 
     padding: 0;
 
     padding: 0;
 
}
 
}
Line 39: Line 44:
  
 
ul.menu > li:hover > ul.subMenu {
 
ul.menu > li:hover > ul.subMenu {
−
     animation-name: fadeInDown;
+
     -webkit-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
−
     animation-fill-mode: forwards;
+
     -o-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
−
     animation-duration: .4s;
+
     -moz-animation: fadeInDown forwards .4s cubic-bezier(.19,1,.22,1);
−
     animation-timing-function: cubic-bezier(.19, 1, .22, 1);
+
     animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
 +
    -webkit-animation-delay: 0s;
 +
    -moz-animation-delay: 0s;
 +
    -o-animation-delay: 0s;
 
     animation-delay: 0s;
 
     animation-delay: 0s;
−
     display: -ms-flexbox;
+
    display:flex;
−
     display: flex;
+
    display:-moz-flex;
 +
     display:-ms-flex;
 +
     display:-o-flex;
 +
    display:-webkit-flex;
 +
    -webkit-flex-flow: column;
 
     flex-flow: column;
 
     flex-flow: column;
 
     margin: 0;
 
     margin: 0;
Line 75: Line 87:
  
 
ul.menu > li:after {
 
ul.menu > li:after {
 +
    -webkit-transition: all .8s cubic-bezier(.19, 1, .22, 1);
 +
    -moz-transition: all .8s cubic-bezier(.19, 1, .22, 1);
 +
    -ms-transition: all .8s cubic-bezier(.19, 1, .22, 1);
 +
    -o-transition: all .8s cubic-bezier(.19, 1, .22, 1);
 
     transition: all .8s cubic-bezier(.19, 1, .22, 1);
 
     transition: all .8s cubic-bezier(.19, 1, .22, 1);
 
     content: "";
 
     content: "";

Revision as of 11:43, 18 September 2018

@keyframes fadeInDown { 

   0% {
       opacity: 0;
       -moz-opacity: 0;
       transform: translate3d(0, -30px, 0);
       -moz-transform: translate3d(0,-30px,0);
   }
   100% {
       opacity: 1;
       -moz-opacity: 1;
       transform: none;
       -moz-transform: none;
   }

}

ul.menu { 

   height: 2em;
   width: max-content;
   width:-moz-max-content;
   padding: 0;

}

ul.menu > li { 

   list-style: none;
   float: left;
   padding-left: 10px;
   padding-right: 10px;
   line-height: 2em;
   text-align: center;
   font-size: 16px;

}

ul.menu > li:hover { 

   color: inherit;

}

ul.menu > li > ul.subMenu { 

   padding: 0;
   display: none;
   position: absolute;
   z-index: 1;
   text-align: left;

}

ul.menu > li:hover > ul.subMenu { 

   -webkit-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -o-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -moz-animation: fadeInDown forwards .4s cubic-bezier(.19,1,.22,1);
   animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   display:flex;
   display:-moz-flex;
   display:-ms-flex;
   display:-o-flex;
   display:-webkit-flex;
   -webkit-flex-flow: column;
   flex-flow: column;
   margin: 0;

}

ul.menu > li:last-child > ul.subMenu { 

   right: 0;

}

ul.menu > li > ul.subMenu > li { 

   display: block;
   position: relative;
   background-color: #f7f7f7;
   padding: 5px 20px;
   margin: 0;

}

ul.menu > li > ul.subMenu > li:before { 

   position: absolute;
   display: block;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15);
   z-index: -1;

}

ul.menu > li:after { 

   -webkit-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -moz-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -ms-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -o-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   transition: all .8s cubic-bezier(.19, 1, .22, 1);
   content: "";
   display: block;
   width: 0;
   height: 3px;
   position: relative;
   bottom: 3px;
   background: #41cd52;
   z-index: 1;

}

ul.menu > li:hover:after { 

   width: 100%;

}