@charset "utf-8";
	/* CSS Document */
/*重置浏览器的默认样式*/
body,ul,li,p,h1,h2,h3,img {
	margin:0;
	padding:0;
	border:0;
	list-style:none;
}
/*全局控制*/
body {
	font-family:'微软雅黑';
}
a:link,a:visited {
	text-decoration:none;
}
/*控制背景图片的样式*/
img.bg {
	width:100%;
	height:auto !important;
	min-width:1024px;
	position:fixed;
	/*固定定位*/
  z-index:1;
	/*设置z-index层叠等级为1;
	*/
}
/*整体控制天气图标的大盒子*/
.slider {
	position:absolute;
	bottom:100px;
	width:100%;
	text-align:center;
	z-index:9999;
	/*设置z-index层叠等级为9999;
	*/
}
/*整体控制每个天气图标的样式*/
.slider li {
	display:inline-block;
	/*将块元素转为行内块元素*/
  width:170px;
	height:130px;
	margin-right:15px;
}
/*绘制每个天气图标的圆角矩形模块*/
.slider a {
	width:170px;
	font-size:22px;
	color:#fff;
	display:inline-block;
	padding-top:70px;
	padding-bottom:20px;
	border:2px solid #fff;
	border-radius:5px;
	position:relative;
	/*相对定位*/
	cursor:pointer;
	/* 光标呈现为指示链接的手型指针*/
	text-shadow:-1px -1px 1px rgba(0,0,0,0.8),-2px -2px 1px rgba(0,0,0,0.3),-3px -3px 1px rgba(0,0,0,0.3);
}
/*控制每个天气图标圆角矩形的背景色*/
.slider li:nth-of-type(1) a {
	background-color:#9d907f;
}
.slider li:nth-of-type(2) a {
	background-color:#19425e;
}
.slider li:nth-of-type(3) a {
	background-color:#58a180;
}
.slider li:nth-of-type(4) a {
	background-color:#a1c64a;
}
.slider li:nth-of-type(5) a {
	background-color:#ffc103;
}
/* 设置after伪元素选择器的样式*/
.slider a::after {
	content:"";
	display:block;
	height:120px;
	width:120px;
	border:5px solid #fff;
	border-radius:50%;
	position:absolute;
	/*相对与绝对定位*/
  left:50%;
	top:-80px;
	z-index:9999;
	/*设置z-index层叠等级为9999;
	*/
  margin-left:-60px;
}
/* 使用after伪元素在标记之后插入内容*/
.slider li:nth-of-type(1) a::after {
	background:url(images/sbg1.jpg) no-repeat center;
}
.slider li:nth-of-type(2) a::after {
	background:url(images/sbg2.jpg) no-repeat center;
}
.slider li:nth-of-type(3) a::after {
	background:url(images/sbg3.jpg) no-repeat center;
}
.slider li:nth-of-type(4) a::after {
	background:url(images/bg4.jpg) no-repeat center;
}
.slider li:nth-of-type(5) a::after {
	background:url(images/sbg5.jpg) no-repeat center;
}
/*设置before伪元素选择器的样式*/
.slider a::before {
	content:"";
	display:block;
	height:120px;
	width:120px;
	border:5px solid #fff;
	border-radius:50%;
	position:absolute;
	/*相对与绝对定位*/
  left:50%;
	top:-80px;
	margin-left:-60px;
	z-index:99999;
	/*设置z-index层叠等级为9999;
	*/ 
  background:rgba(0,0,0,0.3);
}
.slider a:hover::before {
	opacity:0;
}
/*控制第一个背景图切换的动画效果*/
@keyframes 'slideLeft' {
	0% {
	left:-500px;
}
100% {
	left:0;
}
}@-webkit-keyframes 'slideLeft' {
	0% {
	left:-500px;
}
100% {
	left:0;
}
}@-moz-keyframes 'slideLeft' {
	0% {
	left:-500px;
}
100% {
	left:0;
}
}@-o-keyframes 'slideLeft' {
	0% {
	left:-500px;
}
100% {
	left:0;
}
}@-ms-keyframes 'slideLeft' {
	0% {
	left:-500px;
}
100% {
	left:0;
}
}/*当单击链接时，为所链接到的内容指定样式*/
.slideLeft:target {
	z-index:100;
	animation:slideLeft 1s 1;
	-webkit-animation:slideLeft 1s 1;
	-moz-animation:slideLeft 1s 1;
	-ms-animation:slideLeft 1s 1;
	-o-animation:slideLeft 1s 1;
}
/*控制第二个背景图切换的动画效果*/
@keyframes 'slideBottom' {
	0% {
	top:350px;
}
100% {
	top:0;
}
}@-webkit-keyframes 'slideBottom' {
	0% {
	top:350px;
}
100% {
	top:0;
}
}@-moz-keyframes 'slideBottom' {
	0% {
	top:350px;
}
100% {
	top:0;
}
}@-ms-keyframes 'slideBottom' {
	0% {
	top:350px;
}
100% {
	top:0;
}
}@-o-keyframes 'slideBottom' {
	0% {
	top:350px;
}
100% {
	top:0;
}
}/*当单击链接时，为所链接到的内容指定样式*/
.slideBottom:target {
	z-index:100;
	/*设置z-index层叠等级100;
	*/
	/*定义动画播放时间和次数*/
	animation:slideBottom 1s 1;
	-webkit-animation:slideBottom 1s 1;
	-moz-animation:slideBottom 1s 1;
	-ms-animation:slideBottom 1s 1;
	-o-animation:slideBottom 1s 1;
}
/*控制第三个背景图切换的动画效果*/
@keyframes 'zoomIn' {
	0% {
	-webkit-transform:scale(0.1);
}
100% {
	-webkit-transform:none;
}
}@-webkit-keyframes 'zoomIn' {
	0% {
	-webkit-transform:scale(0.1);
}
100% {
	-webkit-transform:none;
}
}@-moz-keyframes 'zoomIn' {
	0% {
	-moz-transform:scale(0.1);
}
100% {
	-moz-transform:none;
}
}@-ms-keyframes 'zoomIn' {
	0% {
	-ms-transform:scale(0.1);
}
100% {
	-ms-transform:none;
}
}@-o-keyframes 'zoomIn' {
	0% {
	-o-transform:scale(0.1);
}
100% {
	-o-transform:none;
}
}/*当单击链接时，为所链接到的内容指定样式*/
.zoomIn:target {
	z-index:100;
	/*设置z-index层叠等级为100;
	*/
	animation:zoomIn 1s 1;
	-webkit-animation:zoomIn 1s 1;
	-moz-animation:zoomIn 1s 1;
	-ms-animation:zoomIn 1s 1;
	-o-animation:zoomIn 1s 1;
}
/*控制第四个背景图切换的动画效果*/
@keyframes 'zoomOut' {
	0% {
	-webkit-transform:scale(2);
}
100% {
	-webkit-transform:none;
}
}@-webkit-keyframes 'zoomOut' {
	0% {
	-webkit-transform:scale(2);
}
100% {
	-webkit-transform:none;
}
}@-moz-keyframes 'zoomOut' {
	0% {
	-moz-transform:scale(2);
}
100% {
	-moz-transform:none;
}
}@-ms-keyframes 'zoomOut' {
	0% {
	-ms-transform:scale(2);
}
100% {
	-ms-transform:none;
}
}@-o-keyframes 'zoomOut' {
	0% {
	-o-transform:scale(2);
}
100% {
	-o-transform:none;
}
}/*当单击链接时，为所链接到的内容指定样式*/
.zoomOut:target {
	z-index:100;
	/*设置z-index层叠等级100;
	*/
	animation:zoomOut 1s 1;
	-webkit-animation:zoomOut 1s 1;
	-moz-animation:zoomOut 1s 1;
	-ms-animation:zoomOut 1s 1;
	-o-animation:zoomOut 1s 1;
}
/*控制第五个背景图切换的动画效果*/
@keyframes 'rotate' {
	0% {
	-webkit-transform:rotate(-360deg) scale(0.1);
}
100% {
	-webkit-transform:none;
}
}@-webkit-keyframes 'rotate' {
	0% {
	-webkit-transform:rotate(-360deg) scale(0.1);
}
100% {
	-webkit-transform:none;
}
}@-moz-keyframes 'rotate' {
	0% {
	-moz-transform:rotate(-360deg) scale(0.1);
}
100% {
	-moz-transform:none;
}
}@-ms-keyframes 'rotate' {
	0% {
	-ms-transform:rotate(-360deg) scale(0.1);
}
100% {
	-ms-transform:none;
}
}@-o-keyframes 'rotate' {
	0% {
	-o-transform:rotate(-360deg) scale(0.1);
}
100% {
	-o-transform:none;
}
}/*当单击链接时，为所链接到的内容指定样式*/
.rotate:target {
	z-index:100;
	/*设置z-index层叠等级为100;
	*/
	animation:rotate 1s 1;
	-webkit-animation:rotate 1s 1;
	-moz-animation:rotate 1s 1;
	-ms-animation:rotate 1s 1;
	-o-animation:rotate 1s 1;
}
@keyframes 'notTarget' {
	0% {
	z-index:75;
}
/*动画开始时的状态*/
	100% {
	z-index:75;
}
/*动画结束时的状态*/}@-webkit-keyframes 'notTarget' {
	0% {
	z-index:75;
}
100% {
	z-index:75;
}
}@-moz-keyframes 'notTarget' {
	0% {
	z-index:75;
}
100% {
	z-index:75;
}
}@-ms-keyframes 'notTarget' {
	0% {
	z-index:75;
}
100% {
	z-index:75;
}
}@-o-keyframes 'notTarget' {
	0% {
	z-index:75;
}
100% {
	z-index:75;
}
}/*排除target元素指定动画样式*/
.bg:not(:target) {
	animation:notTarget 1s 1;
	-webkit-animation:notTarget 1s 1;
	-moz-animation:notTarget 1s 1;
	-ms-animation:notTarget 1s 1;
	-o-animation:notTarget 1s 1;
}