当我将鼠标悬停在图像上时，我的图像链接有点摆动。我不知道如何解决这个问题:/我在 css 中使用缩放效果使悬停时图片变大一点。
我已经尝试去除阴影效果，但还是一样的问题...
代码
<!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 class="banner">
</div>
<div class="bannerwrap">
<div class="logo">
<img src="logo.png" />
</div>
<div class="recordsbild">
<img src="records.png" />
</div>
<div class="musikstil">
<a href="#"> Dubstep  |</a>
<a href="#">  Hardstyle  |</a>
<a href="#">  Glitch Hop  |</a>
<a href="#">  Chillstep</a>
</div>
<div class="line">
</div>
<div class="menulogos">
<img src="menulogo.png" />
</div>
<div class="menu">
<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 class="socialmedia">
<a href="#" class="fb"> <img src="fb.png" /></a>
<a href="#" class="youtube"> <img src="youtube.png" /> </a>
<a href="#" class="twitter"> <img src="twitter.png" /> </a>
<a href="#" class="soundcloud"> <img src="soundcloud.png" /> </a>
</div>
</div>
</body>
</html>
最佳答案
如果您使用的是 webkit 浏览器，以下内容可能会有所帮助。将它添加到您正在制作动画的元素的容器中应该会使动画更流畅。据我了解，它强制浏览器使用硬件加速。
.socialmedia {
-webkit-backface-visibility: hidden;
}
关于html - 悬停时图像摆动(比例效应)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16208851/