使用 CSS 实现一个简单的骨架屏(Skeleton Screen)
样式:
上代码:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
li{ background-image: linear-gradient(190deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none; background-size: 200% 100%; background-position: 0% 0%; animation: skeleton-loading 1.4s ease infinite; margin-bottom:6px } @keyframes skeleton-loading { 0% { background-position:100% 0%; } 100% { background-position: 0% 100%; } }
参考:使用 CSS 实现一个简单的骨架屏(Skeleton Screen)-css教程-PHP中文网