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

Revision as of 06:21, 5 August 2018 (view source) 773715181 (Talk | contribs) ← Older edit		Revision as of 06:24, 5 August 2018 (view source) 773715181 (Talk | contribs) Newer edit →
Line 1:		Line 1:
−
−
−
−
	#MainPic{		#MainPic{
	position: relative;		position: relative;
Line 25:		Line 21:
	height: auto;		height: auto;
	}		}
−	#BgChange{	+	/*#BgChange{
	-webkit-animation-name: BgChange;		-webkit-animation-name: BgChange;
	-webkit-animation-duration: 5s;		-webkit-animation-duration: 5s;
Line 36:		Line 32:
	50%{background-color: #E0FFFF;}		50%{background-color: #E0FFFF;}
	100%{background-color: #F7EED6;}		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{		.mask{
	margin-top:20px;		margin-top:20px;

---

Revision as of 06:24, 5 August 2018

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;

} /*#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;}

}*/ .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();

}