html+css实现手机缩放，频幕转换_html/css_WEB-ITnose
程序员文章站
2024-01-07 18:24:04
...
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;} }