实战项目名称:原生CSS骨架屏
一、骨架屏是什么?(Skeleton)
- 网站在加载数据的时候,当数据还未加载进来前,会出现白屏。
骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉;
为了避免页面过于空白,前端都会用这种方式预告将会有内容载入,从而提升用户体验
用CSS 创建骨架屏的优势:
- 没有额外的请求,最小的开销。
- 后期维护修改方便。
二、实战步骤
1. 直接源代码附上
有css基础,其实也挺好理解的
<div class="card">
<div class="image">
<img src="https://assets.codepen.io/2002878/wake-up-and-code.jpg" alt="">
</div>
<div class="content">
<h4>CodingStartup</h4>
<div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quasi enim facere commodi omnis...
</div>
</div>
</div>
<div class="card loading">
<div class="image">
</div>
<div class="content">
<h4></h4>
<div class="description">
</div>
</div>
</div>
<style>
:root {
--loading-grey: #ededed;
}
body {
background-color: #f6f6f6;
font-family: Helvetica;
font-size: 15px;
display: flex;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
}
.card {
width: 320px;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0px 4px 6px rgba(0, 0, 0, .12);
}
.image {
height: 200px;
}
.image img {
display: block;
width: 100%;
height: inherit;
object-fit: cover;
}
.content {
padding: 2rem 1.8rem;
}
h4 {
margin: 0 0 1rem;
font-size: 1.5rem;
line-height: 1.5rem;
}
.description {
font-size: 1rem;
line-height: 1.4rem;
}
.loading .image,
.loading h4,
.loading .description {
background-color: var(--loading-grey);
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, .5) 50%,
rgba(255, 255, 255, 0) 60%
) var(--loading-grey);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1s loading ease-in-out infinite;
}
@keyframes loading {
to {
background-position-x: -20%;
}
}
.loading h4 {
min-height: 1.6rem;
border-radius: 4px;
animation-delay: .05s;
}
.loading .description {
min-height: 4rem;
border-radius: 4px;
animation-delay: .06s;
}
</style>
三、效果图
- 加载完成前
- 加载之后