<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>骨架屏</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>
<style>
body {
padding: 0.5rem;
margin: 0;
background: #f1f1f1;
}
/* 骨架屏样式 */
.skeleton-screen-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.skeleton-screen-box ul {
background-color: #fff;
margin: 0 auto;
padding: 20px;
width: 100%;
}
.skeleton-screen-box li {
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
width: 100%;
height: 0.6rem;
list-style: none;
background-size: 400% 100%;
margin-top: 0.6rem;
background-position: 100% 50%;
animation: skeleton-screen-loading 1.4s ease infinite;
}
.skeleton-screen-box li:first-child {
width: 38%;
}
.skeleton-screen-box li:last-child {
width: 61%;
}
@keyframes skeleton-screen-loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
</style>
<body>
<!-- 骨架屏结构 -->
<div class="skeleton-screen-box ">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
/**
* 初始化完成后关闭
*/
window.onload=function(){
setTimeout(function(){
document.getElementsByClassName('skeleton-screen-box')[0].remove();
}, 2000)
}
</script>
</html>
html骨架屏实现
猜你喜欢
转载自blog.csdn.net/weixin_43992507/article/details/129986421
今日推荐
周排行