当我悬停图像时，我的图像链接有点摆动。我不知道如何解决这个问题：/我正在使用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>
答案 0 :(得分：14)
如果您使用的是webkit浏览器，则以下内容可能有所帮助。将其添加到要动画的元素的容器中应该使动画更平滑。据我了解，它迫使浏览器使用硬件加速。
.socialmedia {
-webkit-backface-visibility: hidden;
}
答案 1 :(得分：4)
这是CSS3转换的常见问题。文字轮换后我注意到了。我发现了一些奇怪的解决方案。我不知道这是如何工作的 - 但是有效:)只需使用一些CSS3过滤器。任何过滤器。对于可能是
的webkit-webkit-filter: blur(0px);
这不会改变默认的模糊属性，但会导致平滑的转换，转换，并提供抗锯齿效果。
对于Firefox，您可以使用
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
这解决了问题，但在此之后，具有过滤器属性的元素可能看起来有点模糊。不是因为模糊过滤器，结果与任何过滤器相同。
答案 2 :(得分：1)
我知道我在派对上迟到了，但由于以上都没有为我工作，我猜测在悬停时使用不透明度时我必须有其他人有同样的问题。
最终为我工作的解决方案是将其设置为摆动的项目：
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
这迫使计算机使用图形处理单元，而不是CPU上运行的浏览器。
在此处阅读更多内容：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css