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

m
(修正缺失问题。)
Line 30: Line 30:
  
 
#dlutb #header {
 
#dlutb #header {
 +
    /*background: url("../img/Team/1.jpg") bottom center no-repeat;*/
 
     background: url("https://static.igem.org/mediawiki/2018/7/71/T--DLUT_China_B--Team1.jpg") bottom center no-repeat;
 
     background: url("https://static.igem.org/mediawiki/2018/7/71/T--DLUT_China_B--Team1.jpg") bottom center no-repeat;
 
     background-size: cover;
 
     background-size: cover;
Line 104: Line 105:
 
}
 
}
  
−
#dlutb #meetUs #part1, #dlutb #meetUs #part3, #dlutb #meetUs #part8 {
+
#dlutb #meetUs #part1, #dlutb #meetUs #part3, #dlutb #meetUs #part8,#dlutb #meetUs #part9 {
 
     width: 50%;
 
     width: 50%;
 
     height: 100%;
 
     height: 100%;
Line 113: Line 114:
 
}
 
}
  
−
#dlutb #meetUs #part2, #dlutb #meetUs #part4 {
+
#dlutb #meetUs #part2, #dlutb #meetUs #part4,#dlutb #meetUs #part10 {
 
     width: 50%;
 
     width: 50%;
 
     height: 100%;
 
     height: 100%;
Line 142: Line 143:
 
}
 
}
  
−
#dlutb #meetUs #part2:hover div, #dlutb #meetUs #img2:hover div, #dlutb #meetUs #part4:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img9:hover div, #dlutb #meetUs #img11:hover div {
+
#dlutb #meetUs #part2:hover div, #dlutb #meetUs #img2:hover div, #dlutb #meetUs #part4:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div,#dlutb #meetUs #part10:hover div {
 
     -webkit-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
 
     -webkit-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
 
     -o-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
 
     -o-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
Line 155: Line 156:
 
}
 
}
  
−
#dlutb #meetUs #part1:hover div, #dlutb #meetUs #img3:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #img6:hover div, #dlutb #meetUs #part5:hover div, #dlutb #meetUs #part6:hover div, #dlutb #meetUs #part8:hover div, #dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div {
+
#dlutb #meetUs #part1:hover div, #dlutb #meetUs #img3:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #img6:hover div, #dlutb #meetUs #part5:hover div, #dlutb #meetUs #part6:hover div, #dlutb #meetUs #part8:hover div, #dlutb #meetUs #img11:hover div, #dlutb #meetUs #img13:hover div,#dlutb #meetUs #part9:hover div {
 
     -webkit-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
 
     -webkit-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
 
     -o-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
 
     -o-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
Line 167: Line 168:
 
}
 
}
  
−
#dlutb #meetUs #img2:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img9:hover div, #dlutb #meetUs #img11:hover div {
+
#dlutb #meetUs #img2:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div {
 
     width: calc(133% - 20px);
 
     width: calc(133% - 20px);
 
}
 
}
  
−
#dlutb #meetUs #part2:hover div, #dlutb #meetUs #part4:hover div {
+
#dlutb #meetUs #part2:hover div, #dlutb #meetUs #part4:hover div,#dlutb #meetUs #part10:hover div {
 
     width: calc(150% - 20px);
 
     width: calc(150% - 20px);
 
}
 
}
Line 195: Line 196:
 
}
 
}
  
−
#dlutb #meetUs #part1:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #part8:hover div {
+
#dlutb #meetUs #part1:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #part8:hover div,#dlutb #meetUs #part9:hover div {
 
     left: -150%;
 
     left: -150%;
 
     width: calc(150% - 20px);
 
     width: calc(150% - 20px);
 
}
 
}
  
−
#dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div {
+
#dlutb #meetUs #img11:hover div, #dlutb #meetUs #img13:hover div {
 
     left: -100%;
 
     left: -100%;
 
     width: calc(100% - 20px);
 
     width: calc(100% - 20px);
 
}
 
}

Revision as of 07:38, 11 October 2018

@keyframes fadeInLeft { 

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

}

@keyframes fadeInRight { 

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

}

  1. dlutb #header {
   /*background: url("../img/Team/1.jpg") bottom center no-repeat;*/
   background: url("T--DLUT_China_B--Team1.jpg") bottom center no-repeat;
   background-size: cover;
   height: 100vh;

}

  1. dlutb #ourTeam {
   color: white;
   text-shadow: 2px 0 1px #f68925, -2px 0 1px #f68925, 0 2px 1px #f68925, 0 -2px 1px #f68925;
   text-align: center;
   font-size: 72px;
   line-height: normal;

}

  1. dlutb #teamName {
   margin-top: 50px;

}

  1. dlutb #start {
   font-size: 20px;
   display: table;
   margin: 30px auto 0 auto;
   cursor: pointer;

}

  1. dlutb #meetUs #students, #dlutb #meetUs #instructors {
   margin: 50px auto;
   position: relative;

}

  1. dlutb #meetUs #students {
   max-width: calc(100vw - 200px);

}

  1. dlutb #meetUs #instructors {
   max-width: calc(100vw - 400px);

}

  1. dlutb #meetUs .td {
   position: relative;

}

  1. dlutb #meetUs #students, #dlutb #meetUs #instructors {
   display: table;

}

  1. dlutb #meetUs #students div.tr div.td:nth-child(1), #dlutb #meetUs #students div.tr div.td:nth-child(3) {
   width: 30%;

}

  1. dlutb #meetUs #students div.tr div.td:nth-child(2) {
   width: 40%;

}

  1. dlutb #meetUs #instructors div.tr div.td {
   width: 33%;

}

  1. dlutb #meetUs img {
   max-width: 100%;

}

  1. dlutb #meetUs .intro {
   padding: 10px;
   background: #f8e8d3;
   color: #f68925;
   font-size: 18px;
   display: none;
   width: 100%;
   position: absolute;
   left: 100%;
   top: 0;
   text-indent: 0;

}

  1. dlutb #meetUs #part1, #dlutb #meetUs #part3, #dlutb #meetUs #part8,#dlutb #meetUs #part9 {
   width: 50%;
   height: 100%;
   z-index: 1;
   position: absolute;
   left: 0;
   top: 0;

}

  1. dlutb #meetUs #part2, #dlutb #meetUs #part4,#dlutb #meetUs #part10 {
   width: 50%;
   height: 100%;
   z-index: 1;
   position: absolute;
   left: 50%;
   top: 0;

}

  1. dlutb #meetUs #part5, #dlutb #meetUs #part6, #dlutb #meetUs #part7 {
   width: 20%;
   height: 100%;
   z-index: 1;
   position: absolute;
   top: 0;

}

  1. dlutb #meetUs #part5 {
   left: 20%;

}

  1. dlutb #meetUs #part6 {
   left: 40%;

}

  1. dlutb #meetUs #part7 {
   left: 60%;

}

  1. dlutb #meetUs #part2:hover div, #dlutb #meetUs #img2:hover div, #dlutb #meetUs #part4:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div,#dlutb #meetUs #part10:hover div {
   -webkit-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
   -o-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
   animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   display: block;
   position: absolute;
   right: 0;

}

  1. dlutb #meetUs #part1:hover div, #dlutb #meetUs #img3:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #img6:hover div, #dlutb #meetUs #part5:hover div, #dlutb #meetUs #part6:hover div, #dlutb #meetUs #part8:hover div, #dlutb #meetUs #img11:hover div, #dlutb #meetUs #img13:hover div,#dlutb #meetUs #part9:hover div {
   -webkit-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
   -o-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
   animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   display: block;
   position: absolute;

}

  1. dlutb #meetUs #img2:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div {
   width: calc(133% - 20px);

}

  1. dlutb #meetUs #part2:hover div, #dlutb #meetUs #part4:hover div,#dlutb #meetUs #part10:hover div {
   width: calc(150% - 20px);

}

  1. dlutb #meetUs #part5:hover div {
   left: -475%;
   width: calc(375% - 20px);

}

  1. dlutb #meetUs #part6:hover div {
   left: -575%;
   width: calc(375% - 20px);

}

  1. dlutb #meetUs #part7:hover div {
   left: 200%;
   width: calc(375% - 20px);

}

  1. dlutb #meetUs #img3:hover div, #dlutb #meetUs #img6:hover div {
   left: -133%;
   width: calc(133% - 20px);

}

  1. dlutb #meetUs #part1:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #part8:hover div,#dlutb #meetUs #part9:hover div {
   left: -150%;
   width: calc(150% - 20px);

}

  1. dlutb #meetUs #img11:hover div, #dlutb #meetUs #img13:hover div {
   left: -100%;
   width: calc(100% - 20px);

}