当前位置: 首页 » 笔记 » css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时,暂时用旋转减少抖动

css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时,暂时用旋转减少抖动

零分笔记1,9372024-02-20 18:09

在使用css3 transform:scale(1.2)时遇到一个问题,就是发现文本会抖动。大概就时文本会先变模糊、再变清晰。

经过测试,可以通过旋转来减少抖动的感觉。添加了rotate(0.1deg)后,文本变模糊,但不会再变回清晰。

我使用的场景,鼠标经过时,li放大一些以区分其他列表上的li。

CSS:

transform:  scale(1) translateZ(0) rotate(0deg);//鼠标未经过
transform:  scale(1.01) translateZ(0) rotate(0.1deg);//鼠标经过
/***动画时间***/
-webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);

虽还是不算满意,但也解决了闪了一下的感觉。就当文本模糊时经过的效果吧。

兼容性写法:

transform:scale(1.2) translateZ(0) rotate(0.1deg);
-ms-transform:scale(1.2) translateZ(0) rotate(0.1deg);        /* IE 9 */
-moz-transform:scale(1.2) translateZ(0) rotate(0.1deg);       /* Firefox */
-webkit-transform:scale(1.2) translateZ(0) rotate(0.1deg);     /* Safari 和 Chrome */
-o-transform:scale(1.2) translateZ(0) rotate(0.1deg);        /* Opera */
END
零分站龄17年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
2517
文章
13
分类
3818
标签
3
友链
onlinelovesky317355746vipsever@vip.qq.com