css+html实现Skeleton Screen 加载占位图动画效果（带动画）

效果

自上而下渐隐渐现

源 码

ht ML ，用的 Angular 语法，只要做 简单 的修改就可以成为你需要的语法

<div *ngFor="let  IT em of [1,1,1],index as index" class="skeletonItem anim-opacity2 animation-delay{{index}}">
        <div class="skeletonText "></div>
        <div class="skeletonText" style="width:70%"></div>
        <div class="skeletonText" style="width:40%"></div>
      </div>

css

.skeletonItem {
      padding: 16px;
      border-bottom: 3px solid  # eee;
    }

    .skeletonText {
      h ei ght: 16px;
      background: #e2e2e2;
      m arg in -t op: 12px;
      border-radius: 4px;
    }

    .skeletonText: First -child {
      mar gin -top: 0;
    }
    .anim-opacity2 {
      animation: 1.5s opacity2 0s infinite;
    }
    .animation-delay0 {
      animation-delay: 0s;
    }
    .animation-delay1 {
      animation-delay: 0.5s;

    }
    .animation-delay2 {
      animation-delay: 1s;
    }

    @keyfr am es opacity2 {
      0% {
        opacity: 0.5
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0.5;
      }
    }

总结

到此这篇关于css+html实 现S keleton Screen 加载占位图动画效果（带动画）的 文章 就介绍到这了,更多相关Skeleton Screen 加载占位图内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 css+html实现Skeleton Screen 加载占位图动画效果（带动画） 全部内容，希望文章能够帮你解决 css+html实现Skeleton Screen 加载占位图动画效果（带动画） 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css+html实现Skeleton Screen 加载占位图动画效果（带动画）的详细内容...