欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-24 15:21:14
...
      
MyHtml.html


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