CSS3 hover transform 图片会抖动怎么解决？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 hover transform 图片会抖动怎么解决？相关的知识，希望对你有一定的参考价值。
当鼠标放到图片上面的时候，图片会先抖动一下，然后再放大，有缓存之后就正常了，当ctrl+f5强制刷新后又出现这种情况，经过测试，去掉.inner img width: 500px;就正常，但是我需要缩放图片，请问要怎么解决？谢谢。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outter
height: 375px;
margin: 10px auto;
width: 500px;
.outter:hover .inner
transform: scale(1.1);
.inner
height: 375px;
transition: transform 0.4s ease-in-out 0s;
width: 500px;
.inner img
width: 500px;
</style>
</head>
<body>
<div class="outter">
<div class="inner"><a href=""><img src="http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg" /></a></div>
</div>
</body>
</html>
火狐下测试有此问题，谷歌测试正常。。求助百度知道的大神们。。困扰我好久了。。帮忙解决的再加悬赏
分析：
Blink对transition中，属性transform的动画渲染存在差异，而Chrome中的最新版本，已经不存在此情况。
解决方法：
<style>
.outter
height: 375px;
margin: 10px auto;
width: 500px;
.inner
img:hover
width:110%;
margin-left:-5%;
margin-top:-5%;
img
width:100%;
transition:0.4s ease-in-out;
</style>
复制代码
以上CSS，在IE10、IE11、Chrome及Firefox 45.0.1中调试通过：
首次载入，及Ctrl+F5刷新，均不会有闪动情况
三列板块 js效果
哎!突然发现天天更新意外的好难啊!
这回作的是三列的板块效果,由于不会描述,所以看图片吧!
至于内容,就别太在意了,毕竟是看着这个效果作的.
而效果则是鼠标悬浮,图片放大,利用transform: scale(1.2);
在通过css3的过渡,transition: transform 1s;
以及鼠标悬浮:hover
阴影box-shadow: 10px 10px 10px #ccc;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= , user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style> .kuai{ width: 100%; margin: 0 auto; overflow: hidden; } .kuai>h1{ margin-top: 50px; text-align: center; } .kuai>p{ text-align: center; margin-bottom: 50px; } .kuai p span:hover{ color: #284f86; } .kuai ul li{ list-style-type: none; width: 33.33%; float: left; /* border: 1px solid #ccc; */ overflow: hidden; padding: 10px; box-sizing: border-box; } .kuai ul li img{ width: 100%; transition: transform 1s; } .div1{ overflow: hidden; border: 1px solid #ccc; } .div1 a{ display: block; color: #000; text-decoration: none; } .div1:hover{ box-shadow: 10px 10px 10px #ccc; } .tu{ width: 100%; overflow: hidden; } .tu img:hover{ transform: scale(1.2); } </style> </head> <body> <div class="kuai"> <h1>大咖云集，知识分享的开发者技术社区</h1> <p><span>实战干货、在线直播、专家问答、技术论坛，学习，成长，分享，共建</span> </p> <ul> <li> <div class="div1"><a href=""> <div class="tu"><img src="images/li.jpg" alt=""></div> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> </div> <div class="div2"> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> </div> </li> <li> <div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> </div> <div class="div2"> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> </div> </li> <li> <div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> </div> <div class="div2"> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> </div> </li> </ul> </div> </body> </html>
这是全部的代码,作为日后的储备吧!也就不加那么多的注释了
以上是关于CSS3 hover transform 图片会抖动怎么解决？的主要内容，如果未能解决你的问题，请参考以下文章