css骨架屏

最新推荐文章于 2024-08-20 12:04:11 发布

墙的对面是海

最新推荐文章于 2024-08-20 12:04:11 发布

阅读量260

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52630125/article/details/130615584

版权

文章介绍了如何使用CSS来创建骨架屏，关键在于应用伪元素和动画效果。通过给元素添加特定类名，结合:before和:after伪元素，设置背景颜色、边框圆角以及渐变动画，可以实现从无到有展示内容的骨架加载效果。

摘要由CSDN通过智能技术生成

css 实现骨架屏

使用方法：只需要将这个类名赋值在需要骨架片的元素上，然后动态控制这个类名的增加和删除即可

.skeleton {
  position: relative;
  overflow: hidden;
  &:before {
    content:"";
    z-index: 11111;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #767a82;
    border-radius: inherit;
  }
  &:after {
    content:"";
    position: absolute;
    left: -50%;
    top: 0;
    height: 100%;
    z-index: 11111;
    width: 20%;
    background: linear-gradient(
            to left,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    animation: skeletonAnimation 2s linear infinite;
    transform: skew(-45deg);
  }
}
@keyframes skeletonAnimation {
   to {
     left: 150%;
   }
}