css骨架屏

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%;
   }
}