[分享]css先慢后快

如果你从事过网站开发工作，你一定会遇到一个问题——在访问网站的时候，页面总是先慢后快。body { transition: all 0.5s easeinout; } 这个问题是由CSS的加载方式引起...

如果你从事过网站开发工作，你一定会遇到一个问题——在访问网站的时候，页面总是先慢后快。

body {
  transition: all 0.5s ease-in-out;
} 

这个问题是由CSS的加载方式引起的。CSS存在于HTML文档的头部，在浏览器解析HTML文档时，它会把CSS文件下载到本地，然后渲染页面。但是，由于CSS文件可能很大，下载和渲染的时间会很长。因此，页面会先显示没有CSS样式的内容，然后再慢慢地加载样式，最终呈现出完整的页面。

为了解决这个问题，我们可以利用CSS的transition属性。这个属性可以实现渐变效果，让页面在加载CSS时过渡得更加平滑，避免了页面“抖动”的现象。

html {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
html.loaded {
  opacity: 1;
} 

以上代码的意思是，在HTML元素中设置一个opacity为0，即不可见。同时，使用transition属性让页面在加载CSS时过渡得更加平滑。然后，在CSS文件加载完成后，把html元素的class设置为loaded，这样页面就会呈现完整的效果了。

总之，通过在HTML元素上设置opacity和transition属性，我们可以让页面渐进地呈现出完整的效果，从而避免了“先慢后快”的问题。