如何使用css实现骨架屏？相信大部分人都还没学会这个技能，为了让大家学会，给大家总结了以下内容，话不多说，一起往下看吧。
网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了石楼免费建站欢迎大家使用！
通过after伪元素生成骨架样式，并通过absolute覆盖到实际元素上
.skt-loading {
pointer-events: none; /* 加载中阻止事件 */
.skeleton {
position: relative;
overflow: hidden;
border: none !important;
border-radius: 5px;
background-color: transparent !important;
background-image: none !important;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 9;
width: 100%;
height: 100%;
background-color: #EBF1F8;
display: block;
}
/* 下面这部分都是自定义的，看需求修改 */
&:not(.not-round)::after {
border-radius: 4px;
}
&:not(.not-before)::before {
position: absolute;
top: 0;
width: 30%;
height: 100%;
content: "";
background: linear-gradient(to right,rgba(255,255,255,0) 0,
rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
transform: skewX(-45deg);
z-index: 99;
animation: skeleton-ani 1s ease infinite;
display: block;
}
&.badge {
&::after {
background-color: #F8FAFC;
}
}
}
}
@keyframes skeleton-ani { /* 骨架屏动画 */
from {
left: -100%;
}
to {
left: 150%;
}
}关于使用css实现骨架屏的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。