CSS3 hover transform 图片会抖动怎么解决?

html-css08

CSS3 hover transform 图片会抖动怎么解决?,第1张

经测试,采用Firefox 45.0.1存在闪烁问题,并发现以下浏览器的某个版本:微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况,包括载入闪动,悬停后闪动。分析: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刷新,均不会有闪动情况

用CSS可以实现

你只要改变RevealTrans滤镜的“Transition"的值,就能获得不同的网页切换效果,是不是太方便了点?但很遗憾,要把RevealTrans滤镜用于网页中的某个对象就没有这么简单了,它必须借助于Javascript来调用其方法,才能实现,这就是说要动手编程序了。但也不是太难,下面我将通过一个制作动态字幕变换的例子来说明其使用方法。

渐淡字幕变换效果

这个例子演示了利用Javascript程序控制Revealtrans滤镜来实现字幕逐渐淡出和渐进的效果,请看下面的效果图:

<!--

.mytrans { filter:revealTrans(Transition=12,Duration=2)}

-- >

/style >

2、插入一个层,我们把层的“Layer ID”改为“div1”(可直接在层的属性面板上加入即可),并设置好层的背景和调整好层的大小,并把Revealtrans滤镜加载到到层上,这时你看到的层的标记代码是这样的: div id="div1" style="position:absolutewidth:680pxheight:30pxz-index:37background: #FFFFCClayer-background-color: #FFFFCCborder: 1px none #000000" class="mytrans" >/div >

3、在网页源代码的 head >与 /head >之间插入下面这段Javascript程序:

script language="JavaScript" >

<!--

function HelpArray(len)

{

this.length=len

}

// 建立一个数组,存放转换的内容。

HelpText=new HelpArray(5)

HelpText[0]="在一个文档使用动态转换的滤镜(Revealtrans)其实是很容易的。"

HelpText[1]="首先,为对象的样式表单建立一个需要转换的“Revaltrans"滤镜,"

HelpText[2]="然后,使用“apply()"方法防止错误,"

HelpText[3]="现在,你可以改变任何你想改变的东西,"

HelpText[4]="最后,“play()"方法开始进行转换。"

ScriptText=new HelpArray(5)

var i= -1

// 显示转换效果

function playHelp()

{

if (i==4)

{ i=0 }

else

{ i++}

div1.filters[0].apply()

div1.innerText=HelpText[i]

div1.filters[0].play()

// 设置每段字幕演示的时间,以毫秒计。这里的时间要长于滤镜中的时间,以保证在转换结束后能停留一段时间。

// 以方便看清楚字幕内容。在本例中字幕演示的时间是6秒,滤镜中设置的转换时间是2秒。

mytimeout=setTimeout("playHelp()",6000)

}

-- >

/script >

4、在网页的源代码的 body >中加入这样一句代码:onload="playHelp()"。

到此,可以按F12看效果了,好象也不是太难。你若是想看看其它的转换效果,只要改变一下Revealtrans滤镜中的Transition参数值就行了,其它什么也不用改动,你瞧多方便!用它来作广告条我想效果不会差。比起动画来可瘦小多了。

当然Revealtrans滤镜同样也可以用于图片,效果也不错,但要改动一下Javascript程序。由于CSS还有一个动态滤镜是BlendTrans滤镜,用它做图片的淡入淡出效果相当不错,