<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>骨架屏</title> <style type="text/css"> .text-container {
width: 200px; height: 30px; line-height: 30px; overflow: hidden; } .text-container:empty {
/* 当内容区域空时，样式 */ background-color: #F2F2F2; } .text-container:empty::after {
/* 内容区域空时，增加骨架屏样式 */ content: ''; display: block; width: 200px; height: 30px; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(225, 225, 225, 0.753), transparent); animation: loading 1.5s infinite; } @keyframes loading{
/* 骨架屏的动画 */ 100% {
transform: translateX(100%); } } </style> </head> <body> <div class="text-container skeletons"></div> <script type="text/javascript"> // 模拟页面数据加载 function render() {
var textDom = document.getElementsByClassName('text-container') textDom[0].innerText = '这是文本内容' } // 使用定时器模拟Ajax加载的等待状态 setTimeout('render()', 5000) </script> </body> </html>
