Skeleton Screen Loading,又叫 Skeleton Screen/加载占位图,就是显示dom骨架,加上流光加载效果。
骨架流光的原理,就是 渐变色(linear-gradient多个颜色) + 背景拉伸(background-size: 400% 100%) + 背景移动(background-position)
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none; background-size: 400% 100%; background-position: 100% 50%; animation: skeleton-loading 1.4s ease infinite; } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
2. 骨架屏动画实现
.animated-bg { animation: shimmer 1s forwards linear infinite; background: #f6f7f8; background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; height: 96px; } @keyframes shimmer{ 0%{ background-position: -468px 0 } 100%{ background-position: 468px 0 } }
3. CSS骨架屏载入动画
.video { width: 320px; height: 250px; } .video:empty { cursor: progress; background: linear-gradient(0.25turn, transparent, #fff, transparent), linear-gradient(#eee, #eee), radial-gradient(40px circle at 20px 20px, #EEE 50%, transparent 51%), linear-gradient(#eee, #eee); background-repeat: no-repeat; background-size: 320px 250px,320px 200px, 40px 40px, 270px 40px; background-position: -320px 0, 0 0, 0 210px, 50px 210px; animation: loading 1.5s infinite; } @keyframes loading { to { background-position: 320px 0, 0 0, 0 210px, 50px 210px; } }
:root { --ske-back-color: #edeeef; --ske-logo: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAACQCAMAAAA/Wnm0AAAAclBMVEUAAADOzs7Ly8vLy8vNzc3Nzc3Nzc3Nzc3Ozs7Ozs7Nzc3Ozs7Ozs7Nzc3Nzc3Nzc3Nzc3Ozs7Nzc3Ozs7Ly8vNzc3Nzc3MzMzNzc3Ozs7Pz8/T09PNzc3GxsbNzc3Ozs7Nzc3Ozs7Dw8PNzc3Nzc3Nzc0RvztGAAAAJXRSTlMAv0CA5vuyqWge4NCtjFb1zXhbOCvHtlBHQxcPDQnu1Z+WEXBgGoQieAAAAbRJREFUeNrt2FlugzAUheEDDoEMJEDIPLf1/rfYvgXXVBRfJ7jV+Rdw9Fnyg2Ww/1P8yvCbIv26KKKIotYo+huiyHdikYLnKKKIIooooogiiiiiiCKKKLJFdXCiyfCikyk6Dy/aG6AlhheVhmgagGhuiIrhRSttlA4vSk3RYnDRQpsdhxZl2izFsKKV0t/KnESxj7Yf7+qqrSZAWD+jCoGJNghMtERoojow0fiMoERJBYQkWs5rBCQq8u0RPYue0viWl9lifwRjjDHGGGPPKHIvhpUSzHl46reJtHsUUUQRRSGLVNxZH1HcXacIXfUSoTOKKKKIIooooogiiiiiiCKKKKKIIooooogiihxElV9RJReVulEtFpVy0V03OohFd7lorB8lkIjsOReReRNHIpE95yQa60YzkciecxHFulkqEtlz/UUHNTImFiKRPddTNFl9DZi9CUTtc7Yo+qH1NNFWc7SK5HORdixrFwnmhKLZSSSy58SiHbyKdpCKFLyKFKSiDbyKNhCKkj28irYQivIzfIrSCUSiIt8B/kSjWwU4iZLLaDpbzzPjPALR8jK9FlEe49EnhCEDxcCbebMAAAAASUVORK5CYII="); } ._ske_loading ._ske_color, ._ske_loading ._ske_tag { background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60% ) var(--ske-back-color); background-size: 200% 100%; background-position: 100% 50%; background-position-x: 180%; animation: 1s _ske_loading ease-in-out infinite; } ._ske_color { background-color: var(--ske-back-color); } ._ske_logo { position: relative; } ._ske_logo::after { content: ""; width: 30px; height: 30px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: var(--ske-logo) center/100% no-repeat; } @keyframes _ske_loading { to { background-position-x: -20%; } }
5. 实现H5中Skeleton Screen骨架屏预加载动态效果
要实现圆形,椭圆形等不规则形状骨架,可以使用 mask-image, clip-path, border-radius等技术
标签:loading,Skeleton,Screen,占位,ske,background,position,100%,255 From: https://www.cnblogs.com/mengff/p/17853130.html