css+html怎么实现Skeleton Screen加载占位图动画效果

这篇文章将为大家详细讲解有关css+html怎么实现Skeleton Screen加载占位图动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

效果

自上而下渐隐渐现

源码

html，用的angular语法，只要做简单的修改就可以成为你需要的语法

<div *ngFor="let item 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 {      height: 16px;      background: #e2e2e2;      margin-top: 12px;      border-radius: 4px;    }    .skeletonText:first-child {      margin-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;    }    @keyframes opacity2 {      0% {        opacity: 0.5      }      50% {        opacity: 1;      }      100% {        opacity: 0.5;      }    }

关于“css+html怎么实现Skeleton Screen加载占位图动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。