我试图删除阴影效果,但仍然是同样的问题……
码
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head><Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /><link rel="icon" href="icon.ico" type="image/ico" /><Title>THU | TheHardUploader</Title></head><style> body{ margin: 0px auto; background-image:url(aa.jpg); background-position: center; background-attachment:fixed; background-color:black; background-repeat: no-repeat; } #main{ margin: 0px auto; } .banner{ height: 210px; margin-top: 35px; background-color: black; -kHTML-opacity:.50; -moz-opacity:.50; -ms-filter:”Alpha(opacity=50)”; filter:Alpha(opacity=50); filter: progID:DXImagetransform.Microsoft.Alpha(opacity=0.5); opacity:.50; border-top: 5px solID gray; border-bottom: 5px solID gray; } .logo{ margin: 0px auto; margin-top: -300px; position:absolute; margin-left: 40px; } .recordsbild{ margin: 0px auto; margin-left: 250px; position:absolute; margin-top: -200px; } .line{ position:absolute; height: 180px; wIDth: 10px; background-color: white; margin-top: -195px; margin-left: 950px; } .musikstil{ position:absolute; Font-family: "Arial Rounded MT Bold"; Font-size: 20px; margin-left: 420px; margin-top:-50px; } .musikstil a{ text-decoration: none; Transition: opacity .35s ease-in-out; -moz-Transition: opacity .35s ease-in-out; -webkit-Transition: opacity .35s ease-in-out; color: white; } .musikstil a:hover{ opacity: 0.2; } .menu{ position:absolute; wIDth: 120px; opacity: 1.0; Transition: opacity .25s ease-in-out; -moz-Transition: opacity .25s ease-in-out; -webkit-Transition: opacity .25s ease-in-out; margin: auto; margin-top: -190px; margin-left: 1020px; } .menu a{ color: white; Font-family:"Arial Rounded MT Bold"; text-decoration:none; Font-size: 20px; Transition: opacity .25s ease-in-out; -moz-Transition: opacity .25s ease-in-out; -webkit-Transition: opacity .25s ease-in-out; } .dub{ color:white; } .hard{ color: #009cff; } .glitch{ color: #744eac; } .chill{ color: #bc0096; } .menulogos{ position:absolute; margin-left: 890px; margin-top: -215px; } .shop{ position: absolute; margin-top: 6px; } .promoting{ position: absolute; margin-top: 41px; } .about{ position: absolute; margin-top: 35px; } .artists{ position: absolute; margin-top: 28px; } .release{ position: absolute; margin-top: 17px; } .menu a:hover{ opacity: 0.2; } .bannerwrap{ wIDth: 1280px; margin: 0px auto; } .socialmedia{ margin: 0px; margin-left: 350px; margin-top: 20px; } .socialmedia img{ -webkit-transform:scale(0.9); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.9); /*Mozilla scale version*/ -o-transform:scale(0.9); /*Opera scale version*/ -webkit-Transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-Transition-duration: 0.5s; /*Mozilla duration version*/ -o-Transition-duration: 0.5s; /*Opera duration version*/ opacity: 1; /*initial opacity of images*/ } .socialmedia img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ Box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-Box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-Box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; }</style><body> <div ID="main"> <div > </div> <div > <div > <img src="logo.png" /> </div> <div > <img src="records.png" /> </div> <div > <a href="#"> dubstep  |</a> <a href="#">  Hardstyle  |</a> <a href="#">  Glitch Hop  |</a> <a href="#">  Chillstep</a> </div> <div > </div> <div > <img src="menulogo.png" /> </div> <div > <a href="#" class='contact'> Contact Us </a> </br> <a href="#" class='shop'> Shop </a> </br> <a href="#" class='release'> Releases </a> </br> <a href="#" class='artists'> Artists </a> </br> <a href="#" class='about'> About Us </a> </br> <a href="#" class='promoting'> Promoting </a> </div> </div> <div > <a href="#" > <img src="fb.png" /></a> <a href="#" > <img src="youtube.png" /> </a> <a href="#" > <img src="twitter.png" /> </a> <a href="#" > <img src="soundcloud.png" /> </a> </div> </div></body></HTML>解决方法 如果您使用的是webkit浏览器,则以下内容可能有所帮助.将此添加到您正在动画的元素的容器中应该使动画更平滑.据我了解,它迫使浏览器使用硬件加速. .socialmedia { -webkit-backface-visibility: hIDden;} 总结 以上是内存溢出为你收集整理的html – 悬停时图像摆动(比例效果)全部内容，希望文章能够帮你解决html – 悬停时图像摆动(比例效果)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）