css 骨架屏幕css样本

Posted 2021-05-13

&:empty {
  &:before,
  &:after {
    content: '';
    display: block;
    opacity: 0;
    height: 165px;
    box-sizing: border-box;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(
        90deg, 
        rgba(white, 0) 0, 
        rgba(white, .6) 25%,
        rgba(white, .8) 50%,
        rgba(white, .6) 75%, 
        rgba(white, 0) 100%
      ),
      linear-gradient(map-get($colors, gray-light
      linear-gradient(map-get($colors, gray-light
      linear-gradient(map-get($colors, gray-light
    background-size: 
      60% 100%,
      calc(50% - 20px) 35px,
      calc(100% - 20px) 35px,
      calc(100% - 20px) 35px;
    background-position:
      -150% 0,
      10px 10px,
      center,
      center bottom 15px;
    
    background-color: #fff;
    border: solid 1px map-get($colors, gray-dark)
    animation: loading 1.5s infinite, loading2 .2
  }
  @keyframes loading {
    to {
      background-position:
        350% 0,
        10px 10px,
        center,
        center bottom 15px;
    }
  }
  @keyframes loading2 {
    to {
      opacity: 1;
    }
  }
}