网络前端入门到实战:css实现的骨架屏方案

  

优点

  
      <李>简单,不需要工程,不用操纵生成骨架dom,也不需要二次开发维护李   <李>定制程度高,想怎么搞就怎么搞李   <李>不臃肿,只给你想要的李   
  

缺点

  
      <李>自动化程度低,需要在骨架dom上手动添加类李   <李>协同要求高,不像工程化能通过工程去约束李   
  

思路

  

通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换

  

实现

  

css部分(scss写法)

  

通过<代码> 后伪元素生成骨架样式,并通过绝对<代码> 覆盖到实际元素上

  
 <代码>专门建立的学习Q-q-u-n: 784-783-012,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
  (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
  .skt-loading {
  pointer-events:没有;/*加载中阻止事件*/.skeleton {
  位置:相对;
  溢出:隐藏;
  边界:没有!重要;
  border - radius: 5 px;
  背景颜色:透明!重要;
  背景图片:没有!重要;
  后,::{
  内容:”;
  位置:绝对的;
  左:0;
  上图:0;
  z - index: 9;
  宽度:100%;
  高度:100%;
  background - color: # EBF1F8;
  显示:块;
  }/*下面这部分都是自定义的,看需求修改*/后,不是(.not-round):: {
  border - radius: 4 px;
  }
  之前,不是(.not-before):: {
  位置:绝对的;
  上图:0;
  宽度:30%;
  高度:100%;
  内容:“”;
  背景:线性渐变(向右,rgba (255255255 0) 0,
  rgba (255255255。3) 50%, rgba (255255255 0) 100%);
  变换:skewX(-45度);
  z - index: 99;
  动画:skeleton-ani 1 s缓解无限;
  显示:块;
  }
  和。{徽章
  后,::{
  background - color: # F8FAFC;
  }
  }
  }
  }
  
  @keyframes skeleton-ani{/*骨架屏动画*/从{
  左:-100%;
  }
  ,{
  左:150%;
  }
  } 
  

html部分

  

只需要在你认为合理的骨架粒度元素上添加<代码> 类骨架即可

  

js部分

  

控制好<代码> skt-loading>   

使用注意

  
      <李>后伪元素无法插入到inputimg等非容器元素中,所以如果需要添加skleton,则需要再加一层元素将其包裹李   <李>对于像vuereact数据驱动页面需要先有模拟数据以生成dom李   

网络前端入门到实战:css实现的骨架屏方案