Difference between revisions of "Team:Tianjin/css/home1-0"

Line 265: Line 265:
 
         transform:scale(1,1);
 
         transform:scale(1,1);
 
     }
 
     }
 +
}
 +
.vi{
 +
    visibility: visible !important;
 +
    display: block !important;
 +
    width:20px;
 +
    height:20px;
 +
    top:0px;
 +
    position:absolute;
 +
    right:0px;
 +
    background-repeat: no-repeat;
 +
    background-size:100% 100%;
 +
    -moz-background-size:100% 100%;
 +
    -webkit-background-size:100% 100%;
 +
    background-image: url(https://static.igem.org/mediawiki/2018/3/31/T--Tianjin--close.jpg);
 
}
 
}

Revision as of 05:24, 5 August 2018

body{ 

   background-color: #F7F5E6;

} .navbar-default{ 

   background-color: white ;
   border:solid transparent;

} .navbar-nav>li{ 

   margin-right: 5px;
   margin-left: 5px;

} .navbar-default .navbar-nav>.open>a{ 

   background-color: white!important;
   color: green!important;

} .dropdown-menu > li > a{ 

   background-color: white!important;

} .dropdown-menu > li > a:hover{ 

   background-color: white!important;
   color: green!important;

} .open{ 

   opacity: 1!important;
   z-index: 1998;
   background-color: white;

}


  1. footer h4{
   color: white;
   font-size: 25px !important;
   padding-top: 10px;
   padding-bottom: 10px;

}

  1. footer p{
   color: grey;
   padding-top: 10px;
   padding-bottom: 10px;

} .footer-part{ 

   padding-bottom: 15px;
   padding-top: 15px;

}

  1. footer a{
   color: grey;
   padding-bottom: 10px!important;
   padding-top: 10px!important;

}

  1. footer a:hover,#footer a:focus{
   color: white;
   -moz-transition: all .3s;
   -ms-transition: all .3s;
   -o-transition: all .3s;
   -webkit-transition: all .3s;
   transition: all .3s;

}


  1. MainPic{
   position: relative;
   z-index: 0;
   
   /*background-color: #F7F5E6;*/
   background-size: contain;
   background-repeat: no-repeat;
   /*opacity: 0.8;*/

}

  1. bannercontent{
   height: 75%;
   
   /*padding-bottom: 25%;*/
   box-sizing: border-box;
   margin: auto;

}

  1. bannercontent img{
   background-size: cover;
   width: 100%;
   height: auto;

}

  1. BgChange{
   -webkit-animation-name: BgChange;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;

} @keyframes BgChange{ 

   0%{background-color: #F7EED6;}
   50%{background-color: #E0FFFF;}
   100%{background-color: #F7EED6;}

}


/*日月*/ 

   #animationSunMoon{
   position: relative;
   width: 100%;
   height: 600px;
   top: 80px;
   margin-left:  auto;
   margin-right:  auto;
   /* background-color:  black; */
   overflow:  hidden;
   padding-top: 20px;
   }
   #SunMoon{
   position:  relative;
   margin-left:  auto;
   margin-right:  auto;
   width:  300px;
   height: 1200px;
   /* background-color:  white; */
   -webkit-animation-name: SunRise;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
       }
       @keyframes SunRise{
           from{
   transform:rotate(0deg);
    -webkit-transform:rotate(0deg); */
   }to{
   transform:rotate(360deg);
    -webkit-transform:rotate(360deg); */
       }
   }

   #sun{
   position:  relative;
   top: 0;
   height: 60px;
   width:  60px;
   background:  gold;
   border-radius: 50%;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   margin-left: auto;
   margin-right: auto;
   box-shadow: 0 0 40px gold;
   border-radius: 100px;
   -webkit-animation-name: SunShadow;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
       }
   @keyframes SunShadow{
   0%{
       -webkit-box-shadow: 0 0 40px gold;
       background-color: #ff9900;
   }
   25%{
       -webkit-box-shadow: 0 0 10px gold;
       background-color: #ff6600;

   }        
   50%{
       -webkit-box-shadow: 0 0 10px gold;
       background-color: #ff6600;
   }
   75%{
       -webkit-box-shadow: 0 0 10px gold;
       background-color: #ffcc33;
   }
   100%{
       -webkit-box-shadow: 0 0 40px gold;
       background-color: #ff9900;
   }

   }
   #moon{
   /* background:  yellow; */
   height: 60px;
   width:  60px;
   border-right:20px solid #F60;
   border-radius:50%;
   /* overflow:  hidden; */
   }
   #moon1{
   /* background:  yellow; */
   /* width: 100px; */
   /* height:  100%; */
   /* border-radius:  50%; */
   width: 100px;
   height:100px;
   }


.mask{ 

   margin-top:20px;
   margin-bottom: 20px; 
   margin-left: auto;
   margin-right: auto;

} .mask img{ 

   width: 200px;
   height: 200px;
   cursor:pointer;
   transition: all 0.6s;

} .mask img:hover{ 

   transform: scale(1.1);

} .texta{ 

   position: fixed;
   top: 0px;
   width: 100%;
   height:100%;
   background-color: rgba(0,0,0,0.5);
   z-index: 10000;

} .text1{

} .textChange{ 

   position: absolute;
   /*width: 900px;*/
   margin: auto;
   top: 10%;
   bottom: 10%;
   left:0;
   right: 0;
   background: #FFF;
   border-radius: .4rem .4rem .4rem .4rem;
   text-align: center;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

} .textChange img{ 

   width: 200px;
   height: 200px;
   margin-top: 20px;
   margin-bottom: 20px;

} .textforchange{ 

   padding-bottom: 50px;
   margin-left: auto;
   padding-top: 50px;
   margin-right: auto;
   width: 300px;
   border: 1px solid rgba(0,0,0,0.5);
   /* border-bottom: none; */
   box-shadow: 2px 2px 3px #aaaaaa;

} .textAnimation{ 

   -webkit-animation-name: textscale;
   -webkit-animation-duration: 0.5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-iteration-count:1;

} @keyframes textscale{ 

   0%{
       transform:scale(0,0);
   }
   50%{
       transform:scale(1.2,1.2);
   }
   100%{
       transform:scale(1,1);
   }

} .vi{ 

   visibility: visible !important;
   display: block !important;
   width:20px;
   height:20px;
   top:0px;
   position:absolute;
   right:0px;
   background-repeat: no-repeat;
   background-size:100% 100%;
   -moz-background-size:100% 100%;
   -webkit-background-size:100% 100%;
   background-image: url(T--Tianjin--close.jpg);

}