css如何让硬件开启GPU加速

最新推荐文章于 2024-11-11 12:35:21 发布

不断学习的码农

最新推荐文章于 2024-11-11 12:35:21 发布

阅读量1.2k

点赞数 2

分类专栏： CSS技巧文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_44162077/article/details/128530046

版权

CSS技巧专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS本身不直接支持硬件加速，但可以通过transform、opacity、filter和will-change属性来诱导浏览器使用GPU加速。对于不需要这些属性的元素，可以应用translateZ(0)或translate3d(0,0,0)来触发GPU加速，从而优化性能。

摘要由CSDN通过智能技术生成

css无法直接让硬件加速，但是可以诱导浏览器让硬件开启GPU加速
css的以下属性可以让其触发

transform
opacity
filter
will-change

如果有一些元素不需要用到上面的属性但是需要GPU加速效果，那么可以用这样的小技巧

.element {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);
}