Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Revision as of 06:21, 5 August 2018
- 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();
}