首页 > 其他分享 >Skeleton Screen/加载占位图流光闪动效果收集

Skeleton Screen/加载占位图流光闪动效果收集

时间:2023-11-24 10:22:36浏览次数:29  
标签:loading Skeleton Screen 占位 ske background position 100% 255

Skeleton Screen Loading,又叫 Skeleton Screen/加载占位图,就是显示dom骨架,加上流光加载效果。

骨架流光的原理,就是 渐变色(linear-gradient多个颜色) + 背景拉伸(background-size: 400% 100%) + 背景移动(background-position)

1. CSS实现Skeleton Screen(骨架屏)

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;
    }
}

4. 简单的骨架屏流光 (完整源码

: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

相关文章

  • 界面控件DevExpress WPF Splash Screen,让应用启动画面更酷炫!
    DevExpressWPF的SplashScreen组件可以为应用程序创建十分酷炫的启动屏幕,提高用户在漫长的启动操作期间的体验!P.S:DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用......
  • mac os 编译webrtc 报错screen_capturer_mac.mm:500:5: error: 'CGDisplayStreamStop'
    ../../modules/desktop_capture/mac/screen_capturer_mac.mm:462:11:error:'CGDisplayStreamUpdateGetRects'isonlyavailableonmacOS13.0ornewer[-Werror,-Wunguarded-availability-new]462|CGDisplayStreamUpdateGetRects(updateRef,kC......
  • 与浏览列表有关的对象:history screen location Navigator
    BOM浏览器对象模型的内置对象:1)window对象:BOM的核心对象是window,它表示浏览器的一个实例,它也是ECMAScript规定的Globle对象。location对象:url地址相关的,常见属性有hash,protocal,host,hostname,pathname,port,search,hrefhistory对象:存储最近访问过的网址列表(即历史访问记录),多用于......
  • 后台终端Screen使用
    1、查看sreen状态screen-lsAttached:表示当前screen正在作为主终端使用,为活跃状态。Detached:表示当前screen正在后台使用,为非激发状态。2、查询命令提示screen-help3、创建终端(1)使用-R创建,如果之前有创建唯一一个同名的screen,则直接进入之前创建的screen(2)使用-S创建和......
  • Kill detached screen session
    Listscreens:screen-listOutput:Thereisascreenon:23536.pts-0.wdzee(10/04/201208:40:45AM)(Detached)1Socketin/var/run/screen/S-root.Killscreensession:screen-S23536-Xquit......
  • ScreenBar Halo:程序员的视觉守护者
    前言:在最近的一段时间内,我每天都沉浸在代码的世界中,然而,这样的密集工作导致我的眼睛开始感到不适。经过深思熟虑,我决定去医院进行一次全面的检查。医生严肃地告诉我,我需要适当休息,并减少长时间盯着电脑屏幕的行为。作为一位IT程序员,我要挣钱生活!必须每天进行的代码编写工作,我该如何......
  • html 隐藏元素占位/不占位
    关于循环定时隐藏/显示元素,从而实现一个一闪一闪的效果如图:实现方法:设置display但是display在设为none是不占位置隐藏的display:none;设置visibility而visiblity是占位隐藏visibility:hidden;varnum=true;window.setInterval(()=>{vari=document.......
  • Springboot+Mybatis+Mybatisplus 框架中增加自定义分页插件和sql 占位符修改插件
    一、Springboot简介springboot是当下最流行的web框架,SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置,让这些框架集成在一起变得更加简单,简化了我......
  • A piece of code for loading and caching Skeleton Animation in IO task [Cocos2dx.
    /****************************************************************************Copyright(c)2017-2018XiamenYajiSoftwareCo.,Ltd.http://www.cocos2d-x.orgPermissionisherebygranted,freeofcharge,toanypersonobtainingacopyofthissoft......
  • Linux Screen操作
    LinuxScreen操作安装screen:创建screen:临时退出:查看所有screen:重新进入:删除screen:安装screen:yuminstall-yscreen创建screen:screen-SscreenName(自定义)临时退出:ctrl+a+d查看所有screen:screen-ls重新进入:screen-rscreenID(根据查看的id)删除screen:screen-X-S......