css 开启硬件加速

最新推荐文章于 2023-09-04 10:05:33 发布

weixin_34203832

最新推荐文章于 2023-09-04 10:05:33 发布

阅读量217

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2428630/blog/3007731

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. 何为硬件加速

就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

2. 如何开启硬件加速

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速，只要使用特定的CSS语句就可以开启硬件加速:

/**使用3d效果来开启硬件加速**/
.speed-up {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

如果并不需要用到transform变换，仅仅是开启硬件加速，可以用下面的语句:

/**原理上还是使用3d效果来开启硬件加速**/
.speed-up{
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

对于safari以及chrome，可能会在使用animation或者transition时出现闪烁的问题，可以使用以下的解决方法:

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;

/**webkit上也可以用以下语句  **/
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);