<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>骨架屏</title>
<style>
body{
background-color: #f6f6f6;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
display: flex;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
}
.card{
width: 320px;
background-color: #fff;
border-radius: 6px;
box-shadow: 0px 4px 6px rgb(0, 0, 0,.12);
}
.image-title{
height: 200px;
}
.image-title img{
height: inherit;
width: 100%;
object-fit: cover;
border-radius: 6px 6px 0 0;
}
.content{
padding: 2rem 1.8rem;
}
h4{
margin: 0 0 1rem;
font-size: 1.5rem;
line-height: 1.5rem;
}
.desc{
font-size: 1rem;
line-height: 1.4rem;
}
.loading .image-title,
.loading h4,
.loading .desc{
background-color: #ededed;
background: linear-gradient(
100deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.5) 50%,
rgba(255,255,255,0) 60%
) #ededed;
background-size: 200%;
background-position-x: 180%;
animation: 1s loading ease-in-out infinite;
}
@keyframes loading {
to {
background-position-x:-20%
}
}
.loading h4{
border-radius: 4px;
min-height: 1.6rem;
animation-delay: .05s;
}
.loading .desc{
border-radius: 4px;
min-height: 4rem;
animation-delay: .06s;
}
</style>
</head>
<body>
<div class="card">
<div class="image-title">
<img src="./a.jpeg" alt="骨架屏的图片">
</div>
<div class="content">
<h4>一个大标题</h4>
<div class="desc">以上就是基于 DOM 的骨架屏自动生成方案,其核心是 evalDOM 函数。这个方案在很多场景下的表现还是令人满意的。不过,网页布局和样式组合的可能性太多,想要在各种场景下都获得理想的效果,
还有很长的路要走,但既然已经在路上,就勇敢的向前吧</div>
</div>
</div>
<!-- 骨架屏的样式 loading -->
<div class="card loading">
<div class="image-title">
</div>
<div class="content">
<h4></h4>
<div class="desc"></div>
</div>
</div>
</body>
</html>
样式效果: