html中的占位图怎么做,css+html实现一个简单的Skeleton Screen-加载占位图（带动画）...

效果

自上而下渐隐渐现

源码

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

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;

}

}

欢迎小伙伴点赞收藏，想用的时候copy一下就可以