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

Revision as of 06:16, 1 August 2018 (view source) 773715181 (Talk | contribs) (Created page with "body{ background-color: #F7F5E6; } .navbar-default{ background-color: white ; border:solid transparent; } .navbar-nav>li{ margin-right: 5px; margin-left: 5...")	Revision as of 08:11, 1 August 2018 (view source) 773715181 (Talk | contribs) m (773715181 moved page Team:Tianjin/css/home-1.0.css to Team:Tianjin/css/home-1.0) Newer edit →
(No difference)

---

Revision as of 08:11, 1 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);
   }

}