html中怎么实现骨架屏加载效果 CSS动画教程

骨架屏加载效果，简单来说，就是在数据加载完成之前，先用一些占位元素模拟页面结构，让用户感觉加载速度更快。这不仅仅是优化体验，更是一种心理战术，减少用户的焦虑感。

实现骨架屏，核心就是用CSS模拟内容加载前的样子，再配合一些动画让它“动起来”。

CSS动画实现骨架屏加载效果教程：

方案一：纯CSS实现静态骨架屏

这是最简单的方式，不需要任何JavaScript。

立即学习“前端免费学习笔记（深入）”；

1. HTML结构： 搭建一个与真实内容相似的HTML结构，但用
   或等元素代替实际内容，赋予它们特定的类名。

   2. CSS样式： 使用CSS来定义这些占位元素的样式，比如背景色、圆角等。关键是使用background-color来模拟内容区域，并设置一个过渡效果。

   .skeleton-wrapper {
     width: 300px;
     padding: 15px;
     border: 1px solid #eee;
     border-radius: 5px;
   }
   
   .skeleton-title {
     width: 80%;
     height: 20px;
     background-color: #f2f2f2;
     border-radius: 4px;
     margin-bottom: 10px;
   }
   
   .skeleton-content {
     width: 100%;
     height: 12px;
     background-color: #f2f2f2;
     border-radius: 4px;
     margin-bottom: 5px;
   }
   
   .skeleton-image {
     width: 100%;
     height: 150px;
     background-color: #f2f2f2;
     border-radius: 4px;
   }

   这种方式简单直接，但缺乏动态效果，用户体验稍逊。

   方案二：CSS动画实现动态骨架屏

   在静态骨架屏的基础上，添加CSS动画，让占位元素“动起来”，增加视觉吸引力。

   1. CSS动画： 使用@keyframes定义一个动画，改变占位元素的背景色或透明度。

   @keyframes skeleton-loading {
     0% {
       background-color: #f2f2f2;
     }
     50% {
       background-color: #ddd;
     }
     100% {
       background-color: #f2f2f2;
     }
   }

   2. 应用动画： 将动画应用到骨架屏的占位元素上。

   .skeleton-title,
   .skeleton-content,
   .skeleton-image {
     animation: skeleton-loading 1.5s linear infinite;
     background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite linear;
   }
   
   @keyframes shimmer {
     0% {
       background-position: 200% 0;
     }
     to {
       background-position: -200% 0;
     }
   }

   这种方式增加了动态效果，用户体验更好，但需要更多CSS代码。

   

   DreamGen

   一个AI驱动的角色扮演和故事写作的平台

   下载

   方案三：配合JavaScript控制显示与隐藏

   结合JavaScript，可以在数据加载完成时，移除骨架屏，显示真实内容。

   1. 初始状态： 默认显示骨架屏，隐藏真实内容。
   2. 数据加载： 使用JavaScript异步加载数据。
   3. 切换显示： 数据加载完成后，移除骨架屏的类名，添加真实内容的类名，或者直接替换HTML结构。

   // 假设 dataLoaded 是一个布尔值，表示数据是否加载完成
   if (dataLoaded) {
     document.querySelector('.skeleton-wrapper').style.display = 'none';
     document.querySelector('.real-content').style.display = 'block'; // 或者直接替换 HTML
   }

   这种方式灵活性更高，可以根据实际情况控制骨架屏的显示与隐藏。

   骨架屏的最佳实践是什么？

   • 模拟真实结构： 骨架屏的结构应该尽可能接近真实内容的结构，这样才能更好地减少用户的认知差异。
   • 避免过度动画： 动画效果不宜过于花哨，否则会分散用户的注意力，甚至引起反感。
   • 性能优化： 骨架屏本身不应影响页面性能，避免使用复杂的CSS动画或过多的DOM操作。

   骨架屏对SEO有什么影响？

   一般来说，骨架屏对SEO没有直接影响。搜索引擎主要关注页面的实际内容，而不是加载过程中的占位元素。但是，如果骨架屏加载时间过长，可能会影响页面的加载速度，从而间接影响SEO。因此，需要确保骨架屏本身的性能良好，避免影响页面的整体加载速度。

   除了CSS，还有其他实现骨架屏的方式吗？

   当然，除了纯CSS，还可以使用一些前端框架或库来简化骨架屏的实现。比如：

   • React: 可以使用react-content-loader等组件库，快速生成各种样式的骨架屏。
   • Vue: 也有类似的组件库，比如vue-content-placeholders。

   这些库通常提供了更灵活的配置选项，可以根据实际需求定制骨架屏的样式和动画效果。它们通常基于SVG实现，性能也比较好。

   如何避免骨架屏出现“闪烁”？

   骨架屏闪烁通常发生在数据加载完成后，骨架屏被移除，真实内容瞬间显示出来的时候。为了避免这种情况，可以采用以下策略：

   • 淡入淡出效果： 在移除骨架屏和显示真实内容之间，添加一个淡入淡出的过渡效果，让切换更加平滑。
   • 预加载： 尽可能预加载数据，减少骨架屏的显示时间。
   • 服务端渲染： 使用服务端渲染，直接在服务器端生成包含真实内容的HTML，避免客户端渲染的延迟。

   总的来说，骨架屏是一种简单而有效的优化用户体验的方式。选择合适的实现方式，并注意细节优化，可以显著提升用户对网站加载速度的感知。