📜  如何使用 CSS 创建骨架屏幕加载效果?

📅  最后修改于: 2021-11-08 05:20:55             🧑  作者: Mango

骨架屏幕用于指示内容正在加载。它们也称为启动画面。这是现代设计趋势的一部分。在某些情况下,骨架屏幕比加载旋转器更好。 Facebook、谷歌等许多大公司都在使用它。

HTML 代码:在本节中,我们将创建加载页面屏幕骨架的基本结构。要创建加载页面骨架,我们需要使用

元素来显示内容。我们将为loading类,我们将在加载内容时将其删除。



      

    
        How to Create Skeleton Screen
        Loading Effect using CSS?
    

  

    
        
        
        
    
  

CSS 代码:在本节中,我们将使用一些 CSS 属性来创建加载页面屏幕骨架。


注意: loading类有一个从左向右移动以模仿动画的伪元素。

JavaScript 代码:现在,当加载内容时,我们可以loading类并将内容添加到适当的位置。


完整代码:在本节中,我们将结合以上两节(HTML 和 CSS 代码)来创建骨架屏幕加载效果。如果添加了 JavaScript 代码,则骨架将被数据替换。

例子:



      

    
        How to Create Skeleton Screen
        Loading Effect using CSS?
    
      
    

  

    
        
        
        
    
  

输出: