css+html实现Skeleton Screen 加载占位图动画效果(带动画)
(编辑:jimmy 日期: 2024/11/6 浏览:3 次 )
效果
自上而下渐隐渐现
源码
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; } }
总结
下一篇:Flex布局做出自适应页面(语法和案例)