.cust-skeleton {
margin-top: 20px;
height: 40px;
}
.adm-skeleton {
background-color: rgb(190 190 190 / 20%);
/* ? //vant 版本颜色 */
}
.adm-skeleton.adm-skeleton-animated {
background: linear-gradient(
90deg,
rgb(190 190 190 / 20%) 25%,
rgb(129 129 129 / 24%) 37%,
rgb(190 190 190 / 20%) 63%
);
background-size: 400% 100%;
animation: adm-skeleton-loading 1.4s ease infinite;
}
@keyframes adm-skeleton-loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
.van-skeleton__title {
margin-top: 20px;
width: 48%;
height: 16px;
background-color: rgb(242 243 245);
}
.van-skeleton--animate {
-webkit-animation: van-skeleton-blink 1.2s ease-in-out infinite;
animation: van-skeleton-blink 1.2s ease-in-out infinite;
}
@keyframes van-skeleton-blink {
50% {
opacity: 0.6;
}
}
<div class="cust-skeleton adm-skeleton "></div>
<div class="cust-skeleton adm-skeleton adm-skeleton-animated "></div>
<div class="van-skeleton van-skeleton--animate">
<div class="van-skeleton__title "></div>
</div>