html+css实现手机缩放，频幕转换_html/css_WEB-ITnose

            MyHtml.html                         	 		*{margin:0px;padding:0px;}		body{background:url("imgs/img/bj.jpg")no-repeat fixed;		background-size:cover;}		#nav #logo{		background:rgba(255,255,255,0.3)url("imgs/img/logo.png")center no-repeat;		width:80px;height:80px;display:block;		border:2px solid #00CC00;border-radius:40px;z-index:999;}		#nav #ring a{display:inline-block;width:100px;height:40px;			margin:15px 0px;}		#nav #ring a:nth-child(1){		background:rgba(255,255,255,1)url("imgs/img/1_28.png")top no-repeat;}		#nav #ring a:nth-child(2){		background:rgba(255,255,255,1)url("imgs/img/1_29.png")top no-repeat;}		#nav #ring a:nth-child(3){		background:rgba(255,255,255,1)url("imgs/img/1_30.png")top no-repeat;}		#nav #ring a:nth-child(4){		background:rgba(255,255,255,1)url("imgs/img/1_31.png")top no-repeat;}		#nav #ring a:nth-child(5){		background:rgba(255,255,255,1)url("imgs/img/1_32.png")top no-repeat;}		#nav #ring a:nth-child(6){		background:rgba(255,255,255,1)url("imgs/img/1_33.png")top no-repeat;}		#nav #ring a:nth-child(7){		background:rgba(255,255,255,1)url("imgs/img/1_34.png")top no-repeat;}		#nav #ring a:nth-child(8){		background:rgba(255,255,255,1)url("imgs/img/1_35.png")top no-repeat;}		 @media screen and (min-width:880px){ 			#nav{width:100%;height:70px;}			#nav #logo{position:absolute;top:0px;left:50px;}			#nav #ring{width:865px;height:70px;background:#FFF;			position:relative;margin:0px auto;}		}		 @media screen and (max-width:880px){ 			#nav{width:256px;height:256px;border-radius:50%;			position:fixed;bottom:10px;left:10px;}			#nav #ring{width:256px;height:256px;			background:rgba(0, 0, 0, 0.5);position:relative;			margin:0px auto;border-radius:50%;transform:scale(0.1) rotate(-27deg);				transition:all 500ms ease-out;}			#nav #logo{position:absolute;bottom:0px;left:0px;top:0px;right:0px;				margin:auto;}		    #nav #ring a{display:block;width:40px;height:40px;border-radius:20px;				position:absolute;margin-left:-20px;margin-top:-20px;				}			#nav:hover #ring{transform:scale(1.1) rotate(0deg);opacity:1;}		}			            
				


      
查看更多关于html+css实现手机缩放，频幕转换_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107195