先上效果图,有两种,
这种是使用transform来改变大小缩放
这种是改变文字大小来缩放,会引起排版变化
在使用transform时,能明显感到比使用改变文字大小时更卡顿,并且浏览器的窗口越大,卡顿越明显。
当时我心中就很疑惑,单就从我之前学到的浏览器的渲染机制上来说,改变文字大小是会触发回流的,使用transform时不会触发回流,为什么使用transform会更卡呢?另外网页内没有什么其他内容,回流引起的卡顿应该不大。
经过我的研究(瞎猜),原来是我添加了文字阴影,当我去掉文字阴影时,明显就不卡顿了。
使用改变文字大小的方式时,不会影响到文字阴影的动画。
然而使用transform时,改变的是整个span的大小,同时也就会影响到文字阴影的大小,浏览器需要处理更多的计算量。另外如果在animation里同时把文字放大的话,会加倍放大。
源码如下
<style>
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #3498db;
}
body