|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| | | | |
| − |
| |
| − |
| |
| − |
| |
| − | #MainPic{
| |
| − | position: relative;
| |
| − | z-index: 0;
| |
| − |
| |
| − | /*background-color: #F7F5E6;*/
| |
| − | background-size: contain;
| |
| − | background-repeat: no-repeat;
| |
| − | /*opacity: 0.8;*/
| |
| − | }
| |
| − |
| |
| − | #bannercontent{
| |
| − | height: 75%;
| |
| − |
| |
| − | /*padding-bottom: 25%;*/
| |
| − | box-sizing: border-box;
| |
| − | margin: auto;
| |
| − | }
| |
| − | #bannercontent img{
| |
| − | background-size: cover;
| |
| − | width: 100%;
| |
| − | height: auto;
| |
| − | }
| |
| − | #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(https://static.igem.org/mediawiki/2018/3/31/T--Tianjin--close.jpg);
| |
| − | }
| |
