完整示例代码在：codepen
先来写一个骨架屏基本的DOM结构：
DOCTYPE html>
<html lang="zh">
<body>
<div class="skeleton-card">
<div class="skeleton-header">
<div class="skeleton skeleton-avatar">div>
<div class="skeleton skeleton-title">div>
div>
<div class="skeleton skeleton-image">div>
<div class="skeleton skeleton-text">div>
<div class="skeleton skeleton-text">div>
<div class="skeleton skeleton-text short">div>
div>
body>
html>
加一些样式：
body {
padding: 30px;
background:#e2e9e6c2;
}
.skeleton-card {
width: 300px;
background-color: #ffffff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.skeleton {
background-color: #e2e5e7;
border-radius: 4px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
}
.skeleton-header {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
.skeleton-title {
flex-grow: 1;
height: 20px;
}
.skeleton-text {
height: 14px;
}
.skeleton-text.short {
width: 60%;
}
.skeleton-image {
width: 100%;
height: 150px;
margin-bottom: 16px;
}
现的的效果如下：
骨架屏一般会有一个加载的效果，可以使用线性渐变来实现，
给skeleton添加伪元素：
.skeleton::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, red, transparent);
}
使用linear-gradient 实现一个从左到右的线性渐变，效果是透明-红色-透明
为了突出这个渐变，先加了一个红色，后面会换成正常的渐变颜色，效果如下：
然后我们添加动画让这个渐变元素动起来：
@keyframes skeleton-loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
动画的开始帧为translateX(-100%) ，向左移动-100%，结束帧为translateX(100%)，向右移动100%，效果如下：
最后我们修改渐变颜色：
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
最终效果如下，这里gif的效果不是很好，推荐在codepen里面看
阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21315，转载请注明出处。
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21315，转载请注明出处。
评论0