厦门网站建设方案 (厦门网站树立-CSS开启配件减速来提高网站功能-HTML5-CSS3)

文章编号：1820 更新时间：2024-01-06 分类：互联网资讯 阅读次数：次

资讯内容

在桌面端和移动端用CSS开启配件减速

CSSANimations,transforms以及transitions不会智能开启GPU减速，而是由阅读器的缓慢的软件渲染引擎来口头。那咱们怎样才可以切换到GPU形式呢，很多阅读器提供了某些触发的CSS规定。

如今，像Chrome,FireFox,Safari,IE9+和最新版本的Opera都允许配件减速，当它们检测到页面中某个DOM元素运行了某些CSS规定时就会开启，最清楚的特色的元素的3D变换。

例如：

.cube{-webkit-transform:translate3d(250px,250px,250px)rotate3d(250px,250px,250px,-120deg)scale3d(0.5,0.5,0.5);}

可是在一些状况下，咱们并不须要对元素运行3D变换的成果，那怎样办呢？这时刻咱们可以经常使用个小技巧诈骗阅读器来开启配件减速。

只管咱们或许不想对元素运行3D变换，可咱们一样可以开启3D引擎。例如咱们可以用transform:translateZ(0);来开启配件减速。

.cube{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);/*Othertransformpropertieshere*/}

在ChromeandSafari中，当咱们经常使用CSStransforms或许animations时或许会有页面闪动的成果，上方的代码可以修复此状况：

.cube{-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;/*Othertransformpropertieshere*/}

在webkit内核的阅读器中，另一个行之有效的方法是

.cube{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);/*Othertransformpropertieshere*/}

原生的移动端运行(Nativemobileapplications)总是可以很好的运用GPU，这是为什么它比网页运行(Webapps)体现更好的要素。配件减速在移动端尤其有用，由于它可以有效的缩小资源的应用(麦时注：移动端自身资源有限)。