我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
先看效果
实现思路
- 骨架屏基本样式可以通过html+css来实现
- 关键是骨架屏的移动动画怎样实现
- 可以看到，每一块内容的移动动画都不一样，但是都跟自身宽度比例是一致的
- 所以可以大概知道，动画中控制的宽度一定是百分比的
- 然后想一下怎样实现，从左到右的移动动画
- 没错，可以通过
img+animation与translate来实现 - 当然，这样的实现方式不够优雅
- 还可以怎样实现呢？
- 纯css可以实现一个灰色渐变背景吗？毫无疑问的，答案是可以
- 那其实可以通过
background-image的线性渐变来实现这个灰色背景 - 看到这里了，同学们可能又想起来伪元素再结合
animation与translate来实现 - 当然，既然用到了
background-image，也可以用background-position来实现 - 当然，具体的实现过程中还得考虑一些细节问题
- 比如，他要移动一个屏幕的完整动画，必然需要至少两屏的宽度才可以，当然通过img的透明背景加灰色dom本身的
background也可以实现 - 这个思路很多，感兴趣的朋友可以自己尝试一下
我这里就用background-image与background-position来实现
具体实现
html基础结构
<div class="card">
<div class="card-header animated-bg" id="header"> </div>
<div class="card-content">
<h3 class="card-title animated-bg animated-bg-text" id="title">
</h3>
<p class="card-excerpt" id="excerpt">
<span class="animated-bg animated-bg-text"> </span>
<span class="animated-bg animated-bg-text"> </span>
<span class="animated-bg animated-bg-text"> </span>
</p>
<div class="author">
<div class="profile-img animated-bg" id="profile_img"> </div>
<div class="author-info">
<strong class="animated-bg animated-bg-text" id="name"
> </strong
>
<small class="animated-bg animated-bg-text" id="date"> </small>
</div>
</div>
</div>
</div>
因为每部分的骨架屏dom都要绘制，因此html略多
静态css样式
.card {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
width: 350px;
}
.card-header {
height: 200px;
}
.card-header img {
object-fit: cover;
height: 100%;
width: 100%;
}
.card-content {
background-color: #fff;
padding: 30px;
}
.card-title {
height: 20px;
margin: 0;
}
.card-excerpt {
color: #777;
margin: 10px 0 20px;
}
.author {
display: flex;
}
.profile-img {
border-radius: 50%;
overflow: hidden;
height: 40px;
width: 40px;
}
.author-info {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 10px;
width: 100px;
}
.author-info small {
color: #aaa;
margin-top: 5px;
}
这个没什么好说的，没什么难度
css动画样式
.animated-bg {
background-image: linear-gradient(
to right,
#f6f7f8 0%,
#edeef1 10%,
#f6f7f8 20%,
#f6f7f8 100%
);
/* background-image: url(https://tva1.sinaimg.cn/large/e6c9d24ely1h50s2qil9uj203a02ygle.jpg); */
background-size: 200% 100%;
animation: bgPos 1s linear infinite;
}
.animated-bg-text {
border-radius: 50px;
display: inline-block;
margin: 0;
height: 10px;
width: 100%;
}
@keyframes bgPos {
0% {
background-position: 50% 0;
}
100% {
background-position: -150% 0;
}
}
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
热爱开源，支持开源，拥抱开源！
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
